Add plugins to TinyMCE editor

[rightpalava]

Has anyone managed to successfully add plugins to the TinyMCE editor with ServiceNow?

To enable improved editing and handling of images for our CMS, we have some TinyMCE plugins that I'd like to add in to ServiceNow.

Anyone achieved this?

[tltoulson]

Hi Adam,

Someone correct me if I'm wrong but I don't believe this is possible.   TinyMCE has no way of dynamically loading plugins.   Plugins must be defined in the init function and as far as I can tell, that function is hardcoded into the html page by ServiceNow.   If this is possible, it will likely require one of the following:

1.   That ServiceNow put the tinyMCE.init in a UI Macro or some other record in the database to which we have access

2.   Using a client script or ui script to scrap the tinyMCE instance and reinitializing it

[Inactive_Use445]

Hi Chief,

It might be possible. But I'll let you work out the details! If using Chrome, have a play with the console on a page that uses TinyMCE. You can access all of the TinyMCE methods / functions. 'remove()' for example seems to kill off any HTML areas. I'm thinking it should be possible to stop TinyMCE then re 'init' with a different config or plugins. If the plugins are a single .js file you can upload to UI Scripts.

One thing I have had success with in the past is changing the variable type from Translated HTML to Translated Text. This will then not use TinyMCE at all. Then use an onLoad client script to render the text area with the editor of your choice.

Paul

[elemonnier]

I was able to scrap and reload with custom options/plugins with this:

tinyMCE.remove();



var props = {

       mode : "specific_textareas",

       theme : "modern",

       editor_selector : "htmlField",

       plugins : "-snc_spellchecker,advlist,media,table,paste,searchreplace,preview,fullscreen,link,code,textcolor,charmap,image,visualblocks,autolink",

       dialog_type : "modal",

       paste_auto_cleanup_on_paste : true,

       relative_urls: false,

       remove_script_host: g_tinymce_remove_script_host,

       browser_spellcheck : true,

       menubar: false,

       toolbar1: line1,

       toolbar2: line2,

       toolbar3: "",

       toolbar_items_size: 'small',

       directionality : g_text_direction,

       font_formats: defaultFonts,

       language: g_tinymce_lang,

       validate: false,

       setup : function(ed) {

               TinyMCEReadOnlySetup(ed, true);

               TinyMCEMediaPluginSetup(tinymce, ed);

               TinyMCEDisableAutoCleanup(tinymce, ed);

               TinyMCEVerifyReadOnly(tinymce, ed);

       }       

};

(function(pref){

if(typeof pref !== 'undefined') {

props.verify_html = pref;

if(pref)

props.valid_elements = '*[*]';

}

}())



tinyMCE.init(props);

tinyMCE.isInMainWindow = typeof g_form != "undefined";

;

[elemonnier]

Even better; place this in a UI Script called ResetTinyMCE and set it for Global. You can now call it anywhere from a client script with new ResetTinyMCE():

var ResetTinyMCE = Class.create();

ResetTinyMCE.prototype = {

       initialize: function(custom_items) {

               var line1_items = '';

               if(custom_items == undefined){

                       line1_items = 'bold,italic,underline,bullist,numlist,|,image,|,code';

               }else{

                       line1_items = custom_items;

               }

               tinyMCE.remove();



               var props = {

                       mode : "specific_textareas",

                       theme : "modern",

                       editor_selector : "htmlField",

                       plugins : "-snc_spellchecker,advlist,media,table,paste,searchreplace,preview,fullscreen,link,code,textcolor,charmap,image,visualblocks,autolink,autoresize",

                       dialog_type : "modal",

                       paste_auto_cleanup_on_paste : true,

                       relative_urls: false,

                       remove_script_host: g_tinymce_remove_script_host,

                       browser_spellcheck : true,

                       menubar: false,

                       toolbar1: line1_items,

                       toolbar2: line2,

                       toolbar3: "",

                       toolbar_items_size: 'small',

                       autoresize_min_height: 10,

                       autoresize_max_height: 800,

                       directionality : g_text_direction,

                       font_formats: defaultFonts,

                       language: g_tinymce_lang,

                       validate: false,

                       setup : function(ed) {

                               TinyMCEReadOnlySetup(ed, true);

                               TinyMCEMediaPluginSetup(tinymce, ed);

                               TinyMCEDisableAutoCleanup(tinymce, ed);

                               TinyMCEVerifyReadOnly(tinymce, ed);

                       }

               };

               (function(pref){

                       if(typeof pref !== 'undefined') {

                               props.verify_html = pref;

                               if(pref)

                                       props.valid_elements = '*[*]';

                       }

               }());



               tinyMCE.init(props);

               tinyMCE.isInMainWindow = typeof g_form != "undefined";



       }

};