TinyMCE configuration extension point with jQuery events

Topics: Core, Writing modules, Writing themes
Developer
Jul 17, 2012 at 11:40 PM
Edited Jul 17, 2012 at 11:40 PM

I've created a simple extension mechanism for TinyMCE so custom modules or themes could alter the editor's configuration and opened an issue for it here. This discussion includes the source for legibility (there is no syntax highlight in issues).

This in orchard-tinymce.js:

 

(function ($) {
    $(document).ready(function () {
        var configuration = {
            theme: "advanced",
            mode: "specific_textareas",
            editor_selector: "tinymce",
            plugins: "fullscreen,autoresize,searchreplace,mediapicker",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,code,fullscreen",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            convert_urls: false,
            valid_elements: "*[*]",
            // shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
            extended_valid_elements: "script[type|defer|src|language]"
        };

        $(document).triggerHandler({
            type: "setupEditor.TinyMce",
            configuration: configuration
        });

        tinyMCE.init(configuration);
    });
})(jQuery);

 

This code initializes the editor as usual but first runs the configuration through a jQuery event. This makes it possible to hook into the setup by writing event handlers and thus modifying the configuration:

 

(function ($) {
    $(document).on("setupEditor.TinyMce", function (values) {
        var configuration = values.configuration;

        configuration.theme_advanced_buttons1 = "bold";
    });
})(jQuery);

 

This latter can be anywhere, in a module or in a theme, included from a template or from a filter... Because the init script waits for the document to be ready, no matter when the event handlers are included relative to the init script they will still be properly discovered and run.

What do you think?

BTW I've also blogged about this pattern.