Salesforce Rich Text Editor's full potential

Salesforce.com implemented CKEditor as the WYSIWYG editor of choice for their Rich Text Area fields, but as you may have noticed, the native editor doesn't support things like direct editing of html, font sizes/styles, font colors, preview, etc...many of the cool features supported by the feature-rich CKEditor.  These limitations can be pretty frustrating, especially when you're trying to build a legit blogging application on the platform.  Being a nosy developer, I decided to see what Salesforce was doing with CKEditor and whether it was feasible to override the control for our purposes at Mavens.  Here's what I found:

<iframe

src="/apexpages/fckeditor/editor/fckeditor.html?InstanceName=00N30000006XBysEAG&Toolbar=SalesforceBasic">

</iframe>




You'll notice the "&Toolbar=SalesforceBasic" url parameter at the end of the iframe's src attribute.  If you use Firebug or Chrome Developer Tools to crawl to this iframe and remove the "&Toolbar=SalesforceBasic" parameter, you'll see the Rich Text Editor refresh and voilà, the überfunctional CKEditor exposes itself!  

So what does this mean?  Simply that you can use javascript to programmatically crawl the dom to your Rich Text Editor(s) in Salesforce, modify the iframe src attribute to remove the "&Toolbar=SalesforceBasic", and you'll have a full-featured WYSIWYG control inside Salesforce.

Here's what you get when you remove the "&Toolbar=SalesforceBasic" parameter from your RTF's iframe:

How to convert Salesforce rich text editor to a “full mode” editor? - PART II

<apex:page standardController="Configuration_Item__c" standardStylesheets="true" showHeader="true" sidebar="true">

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/>

<script> 

  $(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 : 400, 

                        bodyId : target

            });

        });

    });

</script>    

<apex:form id="theForm">

       <apex:pageBlock id="thePageBlock">

       <apex:pageBlockSection columns="1" id="internalSection">

                <apex:pageBlockSectionItem >

                    <apex:outputLabel >SalesforceBasic</apex:outputLabel>

                   <apex:inputField value="{!Configuration_Item__c.Test_Rich__c}"/>

                </apex:pageBlockSectionItem>

          </apex:pageBlockSection>

       </apex:pageBlock>

   </apex:form>

</apex:page>

Salesforce Rich Text Editor – Adding Full Mode Features

I ran across Dan Peter's blog  when I was trying expand on the Salesforce Rich Text Field WYSIWYG and I noticed that if you use firebug and look at the iframe used for the WYSIWYG editor there is a parameter in the url, "&Toolbar=SalesforceBasic" that if you REMOVE it, it will unleash additional functionality from the CKeditor. (see image)

I created some javascript that will do this automaticaly and the only thing you have to do is replace the iframe id i used, "textAreaDelegate_Content__c___Frame" with your iFrame id.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

   <script>

    //Removing the &Toolbar=SalesforceBasic url parameter from the iFrame Source  

    $(document).ready(function(){  

     var richtextid = '[id$=textAreaDelegate_Content__c___Frame]';  

     var iframesrc = jQuery(richtextid).attr("src").replace('&Toolbar=SalesforceBasic','');  

     jQuery(richtextid).attr("src",iframesrc);  

    });  

</script>  

Note : "textAreaDelegate_Content__c___Frame" - view source code and change corresponding "rich text field ID".

for Ex: richText ID - 00NW0000000KgEPMA0 then replace like '00NW0000000KgEPMA0___Frame'

its achieve in the standard pages new/edit alone, so that add above code into Home page component and provide the access to corresponding profile and check it. 

its working for me :)

How to convert Salesforce rich text editor to a “full mode” editor?

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

$(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 : 500, 

                        bodyId : target

            });

        });

});

The result: