Search code examples
salesforceapex-codevisualforce

How to convert Salesforce rich text editor to a "full mode" editor?


With the spring '12 coming over these days, the old "hack" to convert the rich editor will not work any more. What can be done to retain full CKEditor functionality after spring 12?


Solution

  • New CKEditor is object rather than URL based and a new approach is needed. In case anyone needs it, the following script will replace factory editor layout with a full version allowing additional formating options (fonts, colors, etc). Note, I set the height to 600px, adjust for your own needs. Also, as before, this can only work in your own VF pages, you cannot change the behavior of "factory" page layouts.

        $(document).ready(function(){
    
            CKEDITOR.on('instanceReady', function(e) {
                if (e.editor.config.magic) return;
                var target = e.editor.config.bodyId;
                var name = e.editor.name;
                e.editor.destroy();
    
                CKEDITOR.editorConfig = function( config ) { config.magic = true; }
                CKEDITOR.replace(name, {
                            height : 600, 
                            bodyId : target
                });
            });
        });
    

    The result:

    enter image description here