Adding 'codesample' to TinyMCE

Plone Support Customizing Plone
,
3

Additional info on this.
The tinymce initialization has indeed quite changed from 4.5.6 to 4.7.6. Change from Javascript to Typescript may not has been a big issue (Typescript is widely compatible), but initialization has changed.
In fact I got an idea while reading 4.5.6 code; the init function was commented with the indication that it was supposed to be called automatically by Tinymce upon a call to 'rendered'. Searching on the net, all sample I have found initialize Tinymce the way Plone (mockup in fact) is doing it. However, all sample code I have found is old. The most recent one date from 2015 and is a Django code; AFAIK Django is still using Tinymce 3 to this day (from the Github project for integration of Tinymce in Django).
OTOH the sample code for Tinymce 4.7.6 is as follow (in /src/core/main/ts/api/Editor.ts):

 * // Creates a new editor instance
 * var ed = new tinymce.Editor('textareaid', {
 *     some_setting: 1
 * }, tinymce.EditorManager);

So, I tried to copy this code into Plone. More correctly, I hacked savagely plone-logged-in-compiled.js (that I had first regenerated in a un-uglified version by hacking Gruntfile.js and restarting plone-compile-resources)

--- plone-logged-in-compiled.js.ori	2018-06-03 19:46:28.456905685 +0000
+++ plone-logged-in-compiled.js	2018-06-07 23:21:54.768893388 +0000
@@ -67336,25 +67336,10 @@
           }
         }
 
-        tinymce.init(tinyOptions);
-        self.tiny = tinymce.get(self.tinyId);
 
-        if (self.tiny !== null){
-          self.tiny.initialized = true;
-        }
+        self.tiny = new tinymce.Editor(self.tinyId, tinyOptions, tinymce.EditorManager);
+        self.tiny.render();
 
-        /* tiny really should be doing this by default
-         * but this fixes overlays not saving data */
-        var $form = self.$el.parents('form');
-        $form.on('submit', function() {
-          if (self.options.inline === true) {
-            // save back from contenteditable to textarea
-            self.$el.val(self.tiny.getContent());
-          } else {
-            // normal case
-            self.tiny.save();
-          }
-        });
       });
     },
     destroy: function() {

this code is coming from mockup, of course. And it's necessary to regenerate logged-in.js (I guess that it could be possible to test this in Plone dev mode and avoid regenerate logged-in.js but when debugging Plone everything is so slow that I prefer to do all testing in Plone prod mode)

Result is mode interesting that my first try.
Codesample seem to work.
I guess that it could allow to use homegrown plugins in Plone 5.1.2+ too.

Now it needs more testing obviously.
But if other people are interested to test this change in other setups it could be interesting because while this is a small change it could have serious side effects.

1 Like