1 of 1 found this page helpful

Editor Customization

    Introduction to Editor Customization

     

    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:

    • Basic
    • Simple
    • Default
    • Advanced
    • Everything 

    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:

    Basic Editor Preset Code

    FCKConfig.ToolbarSets["Basic"] = [
        ['MindTouchDeki_Save','-','MindTouchDeki_Cancel'],
        ['MindTouchDeki_InsertLink','MindTouchDeki_InsertImage','MindTouchDeki_InsertTemplate','Table'],
        ['MindTouchDeki_InsertExtension'],
        ['FitWindow']
    ] ;
    

    Simple Editor Preset Code

     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']
    ] ;

    Default Editor Preset Code

    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']
    ] ;
    

    Advanced Editor Preset Code

    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']
    ] ;
    

    Everything Editor Preset Code

    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']	
    ] ;
    

     

    Customizing the Editor

    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:

     

    editor_config.png

    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. 

    Adding Plugins

    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:

    • Spell Check
    • One-Click Table
    • Sort Table
    • Definition Lists

    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:

    Table_-_MindTouch_1249405316017.png

     

    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.  

    Was this page helpful?
    Tag page

    Files 6

    FileVersionSizeModified 
    You must login to post a comment.

    Copyright © 2011 MindTouch, Inc. Powered by