Omeka S Footnote JS Module

[lara_m]

Hi all!

First time I’m writing here. I’ve seen the perfect module I need for having enriched footnotes on my Omeka S site: https://github.com/DigitalCarleton/OmekaFootnotesJS. The only problem is that this module is for Omeka Classic. Is there an easy way to use it or implementing it on Omeka S?

Thanks,
Lara

[Daniel_KM]

I published a version for Omeka S here : https://gitlab.com/Daniel-KM/Omeka-S-module-Footnotes
The edition is not adapted (Omeka Classic uses tinymce and Omeka S uses ckEditor), so you have to set the footnotes manually in the html blocks. Furthermore, it uses littlefoot, not bigfoot, because bigfoot is not compatible with jQuery 3, but the code is the same.

[lara_m]

Thank you very much! I’m trying to adapt the ckEditor right now, but it’s a little tricky for me. Anyway, I hope to have some results soon.

Edit: actually I have a question. I’m modifying the /asset/js file creating a new ckEditor plugin, following this guide: https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.html. I don’t know if it is the right strategy, because even if it seems to have (at least a part of) the right code, the button doesn’t show up in the editor when I install the module.

I’m wondering how Omeka S implements ckEditor, if it is needed to change the config.js file of the Omeka installation inserting config.extraPlugins = nameoftheplugin. I don’t understand how to change it from the module itself, without going inside the installation file and modifying it by hand.

[Daniel_KM]

I just published the release (that contains the dependency if you don’t use composer).
It is never recommended to modify code, it will be unmaintainable. So I added a view helper to load the good config. I’m not sure if it’s needed to override all the ckeditor core directory to add a ckeditor plugin.

[lara_m]

Thank you very much for this. I’m encountering a problem I can’t get trought: when I load the module, whatever are the changes made in ckeditor.config (inside the module), the editor loaded is this one https://github.com/omeka/omeka-s/blob/e9203959333fdff1fcf6dd9bfa38298ab717a246/application/asset/vendor/ckeditor/config.js

My code is this (this is just the part for the button to appear).
In footnotes-admin.js:

 // run once the page DOM is ready and loaded
 $(document).ready(function() {
   displayFootnotes();
 });
 
 $(window).on('load', function() {
   displayFootnotes();
 });

function displayFootnote() {
 
       // Define a command that opens our dialog tab.
    CKEDITOR.addCommand('little_footnotes', {
      exec: function (editor) {
        new CKEDITOR.dialogCommand('footnotesDialog');
      }
    });
    
      // Create a toolbar button that executes the above command.
      editor.ui.addButton('Little_footnotes', {
  
          // The text part of the button (if available) and tooptip.
          label: 'Insert Footnotes',
  
          // The command to execute on click.
          command: 'little_footnotes',
  
          //The image of the button.
          icon: this.path + '/icon/superscript-solid.png'
        });

        // Register the "footnote" dialog.
		CKEDITOR.dialog.add( 'little_footnotesDialog', this.path + 'dialogs/foot-dialog.js' );
}

and in ckeditor_config.js:

config.toolbar = [
        { "name" : "advanced", "items" :
            ['Sourcedialog', '-',
             'Link', 'Unlink', 'Anchor', '-',
             'Format', 'Styles', 'PasteFromWord'
             ]
        },
        "/",
        { "items" :
            ['Bold', 'Italic', 'Underline', 'Strike', '-',
             'NumberedList', 'BulletedList', 'Indent', 'Outdent', 'Blockquote', '-', 
             'Little_footnotes' //the footnote button
            ]
        }
       ];

Maybe my code isn’t right so it loads the other version of the editor?

[Daniel_KM]

I don’t have this issue, the new config is working (I removed Bold for check).
Are you sure to have last version of the module : https://gitlab.com/Daniel-KM/Omeka-S-module-Footnotes/-/blob/master/src/View/Helper/CkEditor.php

[lara_m]

Yes, I checked, anyhow I tried to use the code above with a new and clean version of the module. Now the editor is not being changed with no reason, but the icon and the command don’t show up. Well, I’ll figure it out

[madavis2]

I’m sorry for an ignorant question, but I’m having trouble installing the Footnotes Module. I downloaded the zip, uploaded, extracted, renamed it to “Footnotes”, and try to install on the Omeka S admin side and get the following error:

“The library “LittleFoot.js” should be installed. See module’s installation documentation.”

Can you explain how I might install littlefoot.js in my Omeka S environment? I’m hosted with Reclaim. Is this something they would have to do with the command line, e.g.,

npm install --save littlefoot

The readme file says, " The module uses an external library littlefoot.js, so use the release zip to install it, or use and init the source."

Thanks for any help!

[Daniel_KM]

You can run composer install --no-dev at the root of the module, or download the released zip.

Note that this module requires you edit the source of the html content to get the right ids.

If you want more classic foot notes (in the bottom of the block) or if you want something fully integrated in the html editor user interface, you can try the module Block Plus version 3.3.14.0 or higher.