Customizing the MindTouch editor takes a few steps. First let's review the options that are available for changing the functionality of the Editor. If you want to change the features/functionality that is exposed in the editor, you can easily do so by selecting 1 of the 5 preset editor configurations setup on the Editor page in the Control Panel. The 5 editor configurations that are available to you are:
When you apply one of the preset configurations then on the backend MindTouch references the Editor configuration code to then in turn only show that functionality. You can view the configuration code for each of the preset editors below:
FCKConfig.ToolbarSets["Basic"] = [
['MindTouchDeki_Save','-','MindTouchDeki_Cancel'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_InsertTemplate','Table'],
['MindTouchDeki_InsertExtension'],
['FitWindow']
] ;
FCKConfig.ToolbarSets["Simple"] = [
['MindTouchDeki_Save','-','Source'],
['RemoveFormat','-','FontFormat','-','TextColor','BGColor'],
['MindTouchDeki_InsertExtension','-','FitWindow'],
'/',
['MindTouchDeki_Cancel'],
['PasteText','PasteWord'],
['Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Outdent','Indent'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_InsertTemplate','Table']
] ;FCKConfig.ToolbarSets["Default"] = [
['MindTouchDeki_Save','-','Source'],
['RemoveFormat','-','TextColor','BGColor'],
['MindTouchDeki_InsertExtension','-','MindTouchDeki_Transform'],
'/',
['MindTouchDeki_Cancel'],
['Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Outdent','Indent','Blockquote'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_AttachImage','MindTouchDeki_InsertVideo','MindTouchDeki_InsertTemplate','Table'],
'/',
['Style','FontFormat','FontName','FontSize','-','FitWindow']
] ;
FCKConfig.ToolbarSets["Advanced"] = [
['MindTouchDeki_Save','-','Source'],
['Undo','Redo','-','Find','Replace','-','RemoveFormat','-','TextColor','BGColor'],
['MindTouchDeki_InsertExtension','-','MindTouchDeki_Transform'],
'/',
['MindTouchDeki_Cancel'],
['PasteText','PasteWord'],
['Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Outdent','Indent','Blockquote','CreateDiv'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_AttachImage','MindTouchDeki_InsertVideo','MindTouchDeki_InsertTemplate','Table'],
'/',
['Style','FontFormat','FontName','FontSize','-','FitWindow']
] ;
FCKConfig.ToolbarSets["Everything"] = [
['MindTouchDeki_Save','-','Source','Preview','-','MindTouchDeki_InsertTemplate'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['MindTouchDeki_Cancel'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['MindTouchDeki_InsertLink','Unlink','Anchor'],
['MindTouchDeki_InsertImage','MindTouchDeki_AttachImage','MindTouchDeki_InsertVideo','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['MindTouchDeki_Transform','-','MindTouchDeki_InsertExtension'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About']
] ;
Now that you have an idea of the configuration code that is tied to the preset editors let's look at customizing it to add additional features/plugins. First you can customize your editor to show as little or as much functionality that you want. You can see all of the buttons that are available to you if you click on the Everything editor, but what if you don't want to enable all of that, here is the best way to proceed:
The syntax for the editor has the actual buttons in single quotes and are separated by commas. To add and remove buttons from your editor first select the base editor that you want to start with. In this example we'll start with the Basic editor as it has the least functionality. Let's say I want to add the Paste as Plain button to the Basic editor, first we'll start with the Basic editor code:
FCKConfig.ToolbarSets["Basic"] = [
['MindTouchDeki_Save','-','MindTouchDeki_Cancel'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_InsertTemplate','Table'],
['MindTouchDeki_InsertExtension'],
['FitWindow']
] ;
The button code for Paste as Plain text is:
'PasteText'
I can now add this to the Basic editor code as follows (addition is highlighted in Green):
FCKConfig.ToolbarSets["Basic"] = [
['MindTouchDeki_Save','-','MindTouchDeki_Cancel', 'PasteText'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_InsertTemplate','Table'],
['MindTouchDeki_InsertExtension'],
['FitWindow']
] ;
This will then add the Paste as plain text after the MindTouch Cancel Button in the Editor. Once I have this code I will then paste this into the Editor Override which is found in the Control Panel. First select the base editor preset that you are using, which in this case is Basic then paste in the above code in the Editor Text Area as follows:
Once you click Save Changes then you can edit a MindTouch page and find the new Paste as Plain Text button in the editor. For a list of all Available editor buttons click here.
Besides adding buttons, you can also add plugins to the editor that allow additional functionality that isn't included with the editor by default. Here are some of the supported plugins for the editor:
With any of the plugins you will need to add button(s) to your preset editor as we see above. You also need to add some additional code in the editor override to load the plugins. In this example I'm going to add the One-Click Table plugin which adds a button to the editor that allows you to easily select the dimensions of the table and insert it as seen in the following screenshot:

To add this plugin to your editor do the following:
First we'll start with our basic editor preset code as seen here:
FCKConfig.ToolbarSets["Basic"] = [
['MindTouchDeki_Save','-','MindTouchDeki_Cancel'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_InsertTemplate','Table'],
['MindTouchDeki_InsertExtension'],
['FitWindow']
] ;
Now in order to add the One-Click Table insert button we need to add 2 pieces of information into our preset code. The first is the button which is the following code:
'TableOC'
The second piece of code that we need is the plugin add code that tells the editor to load the plugin, for the one click table it is the following:
FCKConfig.Plugins.Add( 'tableoneclick' ) ;
We'll add the button into the code itself and then place the plugin code below the Basic preset as follows:
FCKConfig.ToolbarSets["Basic"] = [
['MindTouchDeki_Save','-','MindTouchDeki_Cancel'],
['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_InsertTemplate','Table', 'TableOC'],
['MindTouchDeki_InsertExtension'],
['FitWindow']
] ;
FCKConfig.Plugins.Add( 'tableoneclick' ) ;
This will allow you to then edit the page and have a new button that allows for one click addition of tables. Note that if you want a combination of buttons and plugins you would add them to your preset and then load it into the Editor Override in the Control Panel.
| File | Version | Size | Modified | |
|---|---|---|---|---|
| ||||
| ||||
| ||||
| ||||
| ||||
| ||||
Copyright © 2011 MindTouch, Inc. Powered by