Changes between Initial Version and Version 1 of Documentation/NewbieGuide/ToolBarSpecification


Ignore:
Timestamp:
03/15/18 08:56:18 (19 months ago)
Author:
gogo
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Documentation/NewbieGuide/ToolBarSpecification

    v1 v1  
     1= Specifying The Toolbar = 
     2 
     3Xinha's toolbar, the buttons and drop-downs, can be configured. 
     4 
     5== Simple Pre-Defined Selections == 
     6 
     7When using `XinhaEasy.js` there are a few simple pre-defined toolbars you can use. 
     8 
     9  xinha_toolbar: 'minimal':: 
     10    Just the most common options, without font selections. 
     11 
     12  xinha_toolbar: 'minimal+fonts':: 
     13    Minimal options, plus font selections. 
     14 
     15  xinha_toolbar: 'supermini':: 
     16    A really minimal toolbar, only bold, italic, underline, strikethrough and superscript.  Suitable for really basic comment editing. 
     17 
     18  xinha_toolbar: 'default':: 
     19    The default toolbar. 
     20 
     21== Just Hide Some Buttons/Drop Downs == 
     22 
     23If you want one of the above (or default) toolbars, but want to hide some button(s) in it, you can do this in the config... 
     24 
     25{{{ 
     26  xinha_config.hideSomeButtons(" fontname fontsize textindicator "); 
     27}}} 
     28 
     29which would remove the font name and size drop downs, and the text indicator item (shows fore/background colour). 
     30 
     31== Full Configuration == 
     32 
     33If you wish you can specify the toolbar in full, here is the default... 
     34 
     35{{{ 
     36 
     37  xinha_toolbar:  
     38  [ 
     39    ["popupeditor"], 
     40    ["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"], 
     41    ["separator","forecolor","hilitecolor","textindicator"], 
     42    ["separator","subscript","superscript"], 
     43    ["linebreak","separator","justifyleft","justifycenter","justifyright","justifyfull"], 
     44    ["separator","insertorderedlist","insertunorderedlist","outdent","indent"], 
     45    ["separator","inserthorizontalrule","createlink","insertimage","inserttable"], 
     46    ["linebreak","separator","undo","redo","selectall","print"], (Xinha.is_gecko ? [] : ["cut","copy","paste","overwrite"]), 
     47    ["separator","killword","clearfonts","removeformat","toggleborders","splitblock","lefttoright", "righttoleft"], 
     48    ["separator","htmlmode","showhelp","about"] 
     49  ]; 
     50 
     51}}} 
     52 
     53as you can see it is made up of a 2 dimensional array.  Each subarray can be regarded as a logical "grouping" of "things".   
     54 
     55Each "thing" is either: 
     56 
     57  'separator':: 
     58    A separator colon or other type of indication will be inserted in the toolbar. 
     59 
     60  'linebreak':: 
     61    This is where a linebreak may occur (also see flowToolbars [wiki:ConfigurationOptions Config Option]). 
     62 
     63  'buttonname':: 
     64    The name of a button to display in this location. 
     65 
     66  'dropdownname':: 
     67    The name of a drop down menu to display in this location. 
     68 
     69Note that plugins may also insert themselves into toolbars after you have configured them, presently you should consult the source code of the plugin to determine this (or just try it). 
     70 
     71== Adding Custom Buttons == 
     72 
     73To add a custom button to the toolbar, first you must register the button, then you can add it to your toolbar somewhere.  This can be done in the xinha_config section of loading Xinha (see NewbieGuide). 
     74 
     75{{{ 
     76 
     77 xinha_config.registerButton({ 
     78       id       : "my-hilite",      // the ID of your button 
     79       tooltip  : "Hilite text",    // the tooltip 
     80       image    : "my-hilite.gif",  // image to be displayed in the toolbar 
     81       textMode : false,            // disabled in text mode 
     82       action   : function(editor) { // called when the button is clicked 
     83                    editor.surroundHTML('<span class="hilite">', '</span>'); 
     84                  }, 
     85       context  : "p" or [ "p", "h1" ]  // will be disabled if outside a <p> element (in array case, <p> or <h1>) 
     86     }); 
     87 
     88  xinha_config.toolbar.push(['my-hilite']); 
     89 
     90}}} 
     91 
     92 
     93