Easiest way to add a "source code" button to the CK Wysiwyg/ HTML-Editor?

Submitted by phaqlancs on Thu, 09/19/2019 - 10:51
Forums: 
Feature requests

I really dislike the decision to not provide a html button in the CK editor. Adding images is not possible in most areas but could easily be accomplished with a little HTML. Unfortunately there is no button to switch to the "source view" which makes editing and customization of questions and anwsers nearly impossible.

I was able to globally insert options for creating links and tables - I really don't get why these basic things where not allowed in the first place. Anyways, as images in answers or feedback-texts are not allowed the "native h5p way" - what is the easiest solution to provide a source button or even better an image button where I can easily insert an image url?

Thanks in advance and sorry if this post sounds annoyed. But I totally disagree on these decisions and have no understanding for them whatsoever.

0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network

thorleach

Wed, 08/18/2021 - 20:26

I agree 100%.

There is a tutorial on the h5p.org site that some might find helpful, but I haven't been able to get it to work yet. I mean, I've managed to add the inlineCode button to the wysiwyg editor, but it doesn't work. And I haven't been able to add an image button to the toolbar. I too have found these ommissions extremely frustrating. All I'm trying to do is build a very, very simple text page type that will allow me to open the code editor and insert images and after 3 days of trying, all I have managed to do is upload plugins that don't work and add buttons that don't work. If I can't get these two things to work, then I'm not going to be able to use H5P for our company's LMS.

thorleach

Thu, 08/19/2021 - 00:14

This thread is the one you need if you're going to add the source code editor to H5P!

Basically, you need to go to the ckeditor website and download the ckeditor (I used v4 because that's what they linked to in the aformentioned thread) with ALL of the plugins and swap out the default hp5 ckeditor directory for the new new ckeditor directory w/ plugins. I'm working with the wordpress H5P plugin so the path is /wp-content/plugins/h5p/h5p-editor-php-library/ckeditor.

Once you do that, all you have to do is make a few tweaks to the h5peditor-html.js file found in the /wp-content/plugins/h5p/h5p-editor-php-library/scripts/ directory. There's a little section in h5peditor-html.js file where the ckeditor gets constructed and the way it's written, it checks everything against the "tags" part of the semantics.json in your respective page types (note that this is the file for the HTML widget and so will only effect text containers that include the html widget) and only adds certain buttons . I went and made a few changes (see below) so that I didn't have to keep adding stuff to the tags whenever I wanted to be able to insert pictures and/or directly edit the html code in my HTML widgets (please note that H5P recommends not editing.h5peditor-html.js since your changes will be lost if you update the plugin, but then again, the ckeditor directory might get overwritten too, who knows).

Anyway, that's what worked for me! Hope it helps.

var inserts = [];
inserts.push("Image");
inserts.push("Code");
inserts.push("HorizontalRule");
inserts.push("CodeSnippet");
inserts.push("Source");
inserts.push("Table");
ns.$.merge(this.tags, ["tr", "td", "th", "colgroup", "thead", "tbody", "tfoot"]);