Defer loading of TinyMCE

Plone Support Add-on Development
1

I have a custom edit page with multiple rich text editors. The resources for these editors take too long to load, so I've set them up so TinyMCE only loads one field at a time, after the user clicks an element. At this point, the textarea is added to the DOM, and I run tinymce.init() on it. All this works fine, except I don't get Plone's custom image and link panels. I can specify the plugins, and I get the buttons, but nothing happens when I click on them. With plone-logged-in.js in development mode, I at least get an error:

Failed to load plugin: plonelink from url http://localhost:8484/Intranet/++plone++static/components/tinymce-builded/js/tinymce/plugins/plonelink/plugin.js

Here is my init code:

require(['tinymce'], function(){
tinymce.init({
    selector: '.'+ wid + ' .pat-tinymce',
    plugins: [
        'advlist autolink lists plonelink charmap print preview anchor',
        'searchreplace visualblocks code fullscreen ploneimage',
        'insertdatetime media table contextmenu paste code'
    ],
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | unlink plonelink ploneimage'
    });
});

How can I get my editors to use the right plugin?

2

I'm back to working on this, and still haven't found a solution. I'm currently working on setting up a modal to load each editor, but I would love to know if there is something easier I might be missing.

3

@cdw9 you're not depending on the tinymce pattern but tinymce directly. Only mockup-patterns-tinymce sets up the link modal as you want to have it.
What you try to achieve is an awesome feature. How about contributing that as an option to mockup-patterns-tinymce?

1 Like
4

also on the (extended) topic of deferred loading...
It would also be nice to have tinymce in a separate bundle outside the plone-logged-in bundle an load it on request from within the widget.

5

@abosio helped me with a solution!

Using mockup-patterns-tinymce didn't work, I think that's what I actually had in place when I first submitted the question, I just pasted the wrong thing.

So instead of that whole init block, I just needed:

require(['pat-registry'], function(registry){
    registry.scan($('.'+ wid));
});

This will review the updated DOM, and run the appropriate patterns within the element passed to scan()

1 Like
6

What happens if you edit, then 'edit html', switch to another 'editor' and then back to the first and change to 'visual edit'.

(I ask because I did something similar and it this would not work (not saving (just spinning) or 'loosing TinyMCE stuff (buttons not working etc).