Try our conversational search powered by Generative AI!

TinyMCE: functions in EditorInitConfigurationOptions

Vote:
 

How do I pass functions as configurations to TinyMCE using EditorInitConfigurationOptions?
It can be done in TinyMCE for advanced settings like: http://tinymce.moxiecode.com/wiki.php/Plugin:paste

But EpiServer throws this when a function is used in the EditorInitConfigurationOptions:

[ArgumentException: Invalid JSON primitive: function.]
   System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()

I've tried to solve it by the fix suggested here: http://world.episerver.com/Forum/Developer-forum/EPiServer-CMS-6-CTP-2/Thread-Container/2010/5/Add-modify-or-override-InitOptions-for-TinyMCE/ but no luck.

Does anyone have any suggestion?




#48770
Feb 15, 2011 17:51
Vote:
 

Hi!

I would try creating a non-visuable plug-in and see if you can attach to a global event that matches the one in the configuration options. Heres a full code sample for the trailing plug-in that make sure that you can set the cursor before of after block element placed first or last in the editor (new in CMS 6 R2):

 

/**
* Add trailing element while editing, to enable placing the cursor at the end of the body.
*/
(function(tinymce, $) {
    tinymce.create('tinymce.plugins.EPiTrailing', {
        /**
        * Initializes the plugin, this will be executed after the plugin has been created.
        * This call is done before the editor instance has finished it's initialization so use the onInit event
        * of the editor instance to intercept that event.
        *
        * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
        * @param {string} url Absolute URL to where the plugin is located.
        */
        init: function(ed, url) {
            var t = this;
            ed.onSetContent.add(function(ed, o) {
                t._insertTrailingElement(ed);
            });
            ed.onChange.add(function(ed, cm, e) {
                t._insertTrailingElement(ed);
            });
            ed.onPreProcess.add(function(ed, o) {
                t._trimEmptyElements(ed, o);
            });
        },

        /**
        * Gets information about the plug-in.
        */
        getInfo: function() {
            return {
                longname: 'Trailing element',
                author: 'EPiServer AB',
                authorurl: 'http://www.episerver.com',
                infourl: 'http://www.episerver.com',
                version: 1.0
            };
        },

        /**
        * Makes sure that there always exists a p tag last in the document to be able to set the cursor.
        *
        * @param {tinymce.Editor} ed Editor instance.
        */
        _insertTrailingElement: function(ed) {
            var body = ed.getBody();
            var last = body && body.lastChild;

            if (!body || !last) {
                return;
            }

            if (ed.dom.isBlock(last) && last.tagName !== "P") {
                body.appendChild(ed.dom.create('p', null, '<br _mce_bogus="1" />'));
            }
        },

        /**
        * Removes any p tags considered as empty when getting the content from the editor (or viewing content with the html plug-in).
        *
        * @param {tinymce.Editor} ed Editor instance.
        * @param {options} o Function options.
        */
        _trimEmptyElements: function(ed, o) {
            if (!o.get) {
                return;
            }
            if (o.node.childNodes.length === 1) {
                //Don't remove the last element in the document.
                return;
            }
            var last = o.node.lastChild;
            while (last && last.nodeName === "P" && last.childNodes.length == 1 && last.firstChild.nodeName == 'BR') {
                ed.dom.remove(last);
                last = o.node.lastChild;
            }

            //We remove any empty nodes in the beginning of the document as well.
            var first = o.node.firstChild;
            while (first && first.nodeName === "P" && first.childNodes.length == 1 && first.firstChild.nodeName == 'BR') {
                ed.dom.remove(first);
                first = o.node.firstChild;
            }
        }
    });

    tinymce.PluginManager.add('epitrailing', tinymce.plugins.EPiTrailing);
}(tinymce, epiJQuery));

#48836
Feb 17, 2011 8:06
Vote:
 

Thanx Linus! Your suggestion worked fine.

I made a plugin that listens to events, and in that way I can detect for exampe when a user is pasting text:

 

tinymce.create('tinymce.plugins.ReviewAttributeCleanerTinyMCEPlugin', {
        init: function (ed, url) {           
            var t = this;  
           
            ed.onPostProcess.add(function (ed, o) {

               //check if user is pasting text
               if (!o.get && !o.set && !o.source_view){                                           
                 //do something, o.content is the pasted text
                
              }
                
            });

            ed.onChange.add(function (ed, l) {                         
                //do something else
            });   

        }

 

 

#49463
Mar 18, 2011 8:04
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.