Modifications to CKEditor / InlineMedia Functionality (Map Journal)

FriedrichStriewski1 · ‎08-21-2015

For Map Journal I'd like to enrich the side panel content with additional functionality, e.g. a mark or report function for the user to highlight specific sections or tour points.

If I understand correctly, media types are first configured for both stages (common/builder/media) and the media object (Youtube Video, URL Image etc) is than added by the inline media function (storymapsInlineMedia/plugin.js ?) and (tpl/builder/addedit/viewText ?) to ckeditor and posted afterwards to the side panel.

Now what if I just want to add small self defined scripts or html elements to the InlineMedia so that they are available to the end user through the ckeditor. As such items should not be used for the main stage, is it necessary to create a whole new media class to follow the processing flow of e.g. images or webpages or can I directly code all necessary attributes to a new item accessible by ckeditor and store these modifications in the Map Journal template?

Hope this makes sense!

GregoryL_Azou · ‎08-21-2015

You are correct. common/builder/media is the media dialog that is available for the Main Stage configuration and when you use this feature of CKEditor. For the editor it's storymapsInlineMedia/plugin.js that is doing the work of creating the proper html markup that CKEditor will use.

If what you are trying to add a feature fits well into a media, you could edit those two classes and add your stuff there but you don't have to and I would not recommend that you go that way if it don't really fit well.

The other way is that you develop a new plugin and reference it through tpl/builder/addedit/ViewText.js. Look in that file for reference to storymapsInlineMedia to see how to add it, it's pretty easy. If your plugin is using resources like icons, you will have to edit the Gruntfile.js to make sure that there are copied too, see line 228 or 245 that copy resources for ckeditor community plugin and storymaps plugin. To get started more easily I would start the development in builder/ckeditor/plugins/ and duplicate the storymapsAction plugin.

View solution in original post

GregoryL_Azou · ‎08-21-2015

You are correct. common/builder/media is the media dialog that is available for the Main Stage configuration and when you use this feature of CKEditor. For the editor it's storymapsInlineMedia/plugin.js that is doing the work of creating the proper html markup that CKEditor will use.

If what you are trying to add a feature fits well into a media, you could edit those two classes and add your stuff there but you don't have to and I would not recommend that you go that way if it don't really fit well.

The other way is that you develop a new plugin and reference it through tpl/builder/addedit/ViewText.js. Look in that file for reference to storymapsInlineMedia to see how to add it, it's pretty easy. If your plugin is using resources like icons, you will have to edit the Gruntfile.js to make sure that there are copied too, see line 228 or 245 that copy resources for ckeditor community plugin and storymaps plugin. To get started more easily I would start the development in builder/ckeditor/plugins/ and duplicate the storymapsAction plugin.

FriedrichStriewski1 · ‎09-03-2015

I tried your suggestions with the simple timestamp plugin (Tutorial: CKEditor 4 Documentation ) and everything went well. For simple HTML code this is the most convenient way to go. Much obliged!