Customized CKEditor ToolBars Based on User Roles

So let's say you've built a really cool content management system (CMS) using ckeditor which has you feeling all "rock star-like" when you suddenly realize that you can't have everyone hitting the SOURCE button on the toolbar (things can get pretty ugly...)

Here's how to display a different toolbar set based on user roles.

So I have two roles within my CMS - a super editor and a basic editor. The super editor sees the advance toolbar and the basic, sees the basic.

In my config.js files, I define my toolbars:

Here is my basic tool bar (Basic Editor Access):

config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
};


Here is my FULL tool bar (Super Editor Access):

   config.toolbar_Full =
[
    { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    //{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
    //    'HiddenField' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
    '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
    //{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
    '/',
    { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors', items : [ 'TextColor','BGColor' ] },
    { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];


Ok so here is my editor reference on the CFM page:

My textarea field

 <textarea id="englishText" class="ckeditor" name="englishText">#englishText#</textarea>





Code to show the different toolbars:

 <cfif session.user.roleID EQ 1>
    <script type="text/javascript"> // <![CDATA[
    CKEDITOR.replace( 'englishText', { toolbar : 'Full' });
    // ]]>
    </script>
<cfelse>
    <script type="text/javascript"> // <![CDATA[
    CKEDITOR.replace( 'englishText', { toolbar : 'Basic' });
    // ]]>
    </script>
</cfif>


I want to make a few notes about this code:

1. Notice I did not add the toolbar attribute to the textarea field
2. Notice I added the code UNDER the textarea field. For some reason that I don't know about and had to learn the HARD WAY (GRRRR....) the code has to go after the textarea.


Enjoy! :)