Rich text editor (TinyMCE) configuration - Posted (62 Views)
Forum Administrator
HuwR
Posts: 4609
starstarstarstarstar

The Rich Text Editor (RTE) is based on TinyMCE and is highly configurable. Depending on the configuration, it will give your members more flexibility when working with content that should be more than only plain text.

Configuration

The editor's menu and toolbar can be configured by updating the GloabalJS.cshtml file in the Views folder. Towards the bottom of the file you will find two variable definitions (menudef & toolbardef), these contain the strings which define the items to be displayed. There is also a section where these can be overriden when using the quick reply editor (if required).

        toolbardef :
'fileButton imageButton | undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist | link emoticons media | code codesample',
menudef : 'favs edit insert format table help'
};

/* Quick reply editor overrides */
if ($('#QuickReply').length > 0) {
SnitzVars.menudef = false; // turn off the menu bar
SnitzVars.toolbardef =
'fileButton imageButton media | undo redo | styleselect | bullist numlist | link emoticons | code codesample';

}

toolbardef

'snitzAttach snitzImage | undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist | link emoticons media | code codesample'

This is the default toolbar, simply remove items you do not require, or move around if you wish the layout to appear differently, to hide the toolbar completely set the value to false (toolbardef:false). 
snitzAttach snitzImage are custom buttons, they will only appear if attachments are enabled for the Forum, the snitzImage button will only appear if the Photo/Image Album is enabled.

The quickReply section shows an example of a cut down toolbar. 'snitzAttach snitzImage | undo redo | styleselect | bullist numlist | link emoticons media | codesample'

menudef

'favs edit insert format table help'

Displays the default menu, as with the toolbardef it can be removed by setting the value to false. The first item in the list is called favs, this can be used to display a custom menu item cotaining items of your choice, it is defined in the same file using the variable favmenu, 

        favmenu : {
favs: {title: 'My Favourites', items: 'code | searchreplace | emoticons'}
},

See reply for an explanation

 Sort direction, for dates DESC means newest first  
 Page size 
Posted
Forum Administrator
HuwR
Posts: 4609
starstarstarstarstar

favmenu

This config option can be used to define your own custom menu items. In the example a new menuitem has been declared to hold some common options

        favmenu : {
favs: {title: 'My Favourites', items: 'code | searchreplace | emoticons'}
},
  1. favs: This is the name of our menuitem, it is used by the menubar config to display our menu item
  2. title: Title of our menu item
  3. items: List of items to display in our menu

 

 
You Must enter a message