Enable image upload

[leac]

We would like to be able to embed images as base64 in any content. We replaced the original ckeditor build with a custom build that we generated at the ckeditor.com website, which includes the plugin base64image, but we weren't able to control the availability of the button in any of the content input textareas. Please advise us how to do so. @nadavkav

[falcon-git]

Interesting! Have you looked at https://h5p.org/adding-text-editor-buttons

[nadavkav]

I am able to copy from a desktop or an image on the internet (not the url, but the image's data) and paste it into the editor (a special paste dialog opens up and I paste into it). The image shows while I am editing, but is removed after I save the activity. (I am doing this using the latest 0.3b Moodle hvp plugin, and not on h5p.org cloud account)

[nadavkav]

Thanks you @falcon-git for the link. It looks promising. I will dig into it.

[nadavkav]

@falcon-git , finished digging, and also got a little bit lost in the mine :disappointed: . as I could not find the proper place I can patch core H5P interactions (for example the MultiChoice question) and change the CKEditor available buttons. not to say, add new ones or even extend it with an external plugin.

Obviously, my javascript skills need more practice :-)

Please see if you can direct me to the area/line in the code that is responsible for choosing the CKEditor toolbar buttons in the following example (marked in red box):

[falcon-git]

Have you done dpm and console.log or other types of debugging to figure out if there are parts of https://h5p.org/adding-text-editor-buttons that aren't running?

[nadavkav]

I am not an experienced JS developer. I was using Chrome JS debug to try and trace it. but could not. Please see if you can direct me to the specific line of code that is controlling the list of buttons on the Label UI element.

[icc]

The JS part your module adds should look something like this:

H5P.jQuery(document).ready(function () {
  if (!window.CKEDITOR) return; // CK not available

  // Register plugin with CK
  CKEDITOR.plugins.addExternal('base64image', '/path/to/folder/containing/plugin.js-file/');

  // Tell H5P about the plugin
  H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {};
  H5PEditor.HtmlAddons.img = H5PEditor.HtmlAddons.img || {};
  H5PEditor.HtmlAddons.img.base64image = function (config, tags) {
    // Print debug to browser console (Ctrl+Shift+J in Chrome)
    console.log('Adding base64image plugin...');

    // Add plugin to config
    config.extraPlugins = (config.extraPlugins ? ',' : '') + 'base64image';

    // Looking inside plugin.js I see that base64image should go into
    // the 'insert' toolbar group. So let's create it and add the button
    config.toolbar.push({
      name: 'insert',
      items: ['base64image']
    });
  };
});

Next, I see in plugin.js that the plugin uses the img tag, so it's important that it's allowed for the field:

function mods_h5p_semantics_alter(&$semantics, $library_name) {
  if ($library_name !== 'H5P.InteractiveVideo') return;

  // Using a direct path from semantics.json will break if there are changes.
  // It's wise to loop through each 'fields' and check the name attribute.
  // (You'd probably want a recursive function for that)
  $semantics[0]['fields'][1]['fields'][0]['field']['fields'][3]['tags'][] = 'img';
}

[nadavkav]

Thank you @icc It helped :smile:

I used different pieces of the first chunk of code you posted and added it to: https://github.com/h5p/h5p-editor-php-library/blob/master/scripts/h5peditor-html.js#L3 https://github.com/h5p/h5p-editor-php-library/blob/master/ckeditor/config.js I changed the semantics on the H5P.MultiChoice library at several palces, here is one: https://github.com/h5p/h5p-multi-choice/blob/master/semantics.json#L27 (And reloaded it back into Moodle) Mostly, it works.

At some point, when I was trying to generate/build a custom LTR/RTL ckeditor with "bidi" plugins, and replace the one that ships with H5P, I also included the above base64image too, which worked around some of the initiation code.

So, mostly, it works. BUT... pasting a base64 images data into the URL field (the src attribute), initially shows up properly when I close the "Add image" dialog, but when I move to a different ckeditor on a different part of the MultiChoice editor and the current ckeditor get destroyed... the image breaks too. the "data:" at the beginning of the base64 image data get removed (somehow). For example: This: "**data:**image/png;base64,iVBORw0KGgoA" Gets truncated to: "image/png;base64,iVBORw0KGgoA" Currently, using the Chrome debugger, I am getting to the point where it happens: https://github.com/h5p/h5p-editor-php-library/blob/master/scripts/h5peditor-html.js#L493 But have no idea why I guess I need some more help :cry:

[icc]

Cool that you got it working, sort of. The CKEditor is removed and destroyed to save resources. Not exactly sure why the data protocol part is removed. It might have something to do with the validation code: https://github.com/h5p/h5p-editor-php-library/blob/master/scripts/h5peditor-html.js#L442 You could try skipping some of it for debugging purposes.

[hieptm96]

@nadavkav Can you tell me the detail way to enable image button in editor? I have read your comment but I till understand :3

[nadavkav]

You need to have a CKEditor with an Image plugin. I generated one at the CKEditor website: http://ckeditor.com/builder Then replace the CKEditor you just generated and downloaded with the one you got from H5P Then download the latest H5P Libraries from: https://h5p.org/update-all-content-types Unzip it, and go into one of the Libraries, for example, "Multi Choice" and edit the semantics file. Add the IMG (html tag) to the "tags" list: https://github.com/h5p/h5p-multi-choice/blob/master/semantics.json#L27 Save it. Zip the entire tree of libraries back into an H5P file And upload it into Moodle - H5P admin library setting page (or other system you might be using) Add an new H5P plugin to a course and create a new Multi Choice question. Go into the question's settings and see that you have a new option, a button, which enables you to add URL (a link) to images. (as H5P does not handle image storage inside the CKEditor)

Hope it help :smile:

[hieptm96]

@nadavkav thank you very much. It's helpfull 👍