Editor

The editor component converts a textarea to a rich text editor.

To invoke the editor on a node edit page, use the value class "editor".

To invoke the editor on anything other than a node editor page, use the class "editor" and the class "editor-show-on-browse", e.g.

<textarea class="editor editor-show-on-browse"> ... </textarea>

By default, all of the capabilities of the editor are available. You can use additional classes or the data-options attribute to select which capabilities you want.

Use the class editor-basic to have only basic capabilities, and editor-expert to have expert capabilities, but not all advanced capabilities. Use editor-none to have no editor menu, which looks like a text box but which will create valid HTML.

Capabilities can also be switched off by adding a data-options attribute containing a JSON structure with the options that are not required set to false. For example, if you wanted to switch of the print and link options, you would have a JSON object with.

{
  "print": false,
  "link": false
}

Remember this has to be escaped in the HTML, i.e. the HTML would look something like:

<textarea class="editor editor-show-on-browse" 
  data-options="{&quot;print&quot;:false,&quot;link&quot;:false}"> ... </textarea>

Switching off the options removes them from view, but they may still be available as keyboard shortcuts. For example, switching off format removes the format menu, but bold can still be achieved using CTRL+B in the keyboard.

The available options are listed below.

undo Undo and redo menu options
copy Copy and paste menu options
format Formatting - bold, italic and clear formatting.
color Foreground and background color
style Heading and body styles
font Font selection
size Font size
list Numbered and bulleted lists
indent Indentation support
table Table support
align Left, right, center and justified alignment
emoticons Insert emoticons
pagebreak Insert the <!--break--> pagebreak.
link Dialog to insert a link
media Dialogs to insert images and media.
find Search and replace
fullscreen Full screen option
print Print support
code View page code
wordcound View wordcount
statusbar View statusbar
advanced

Advanced features:

  • pagebreak
  • media
  • code

Turning this off is equivalent to using the class editor-expert.
expert

Expert features:

  • undo
  • copy
  • link
  • find
  • fullscreen
  • print
  • wordcount
  • statusbar
nonbasic Advanced and expert features combined. Turning this off is the equivalent to using class editor-basic.
basic All the features that are not advanced or expert
all All the features

The group options allow you to switch features on or off in groups. All features are on by default, and swiitching a feature on overrides switching a feature off. As an example, consider the following:

{
  "advanced": false,
  "expert": false,
  "link": true
}

This would switch off the advanced and expert features, but restore the link dialog. The classes editor-none, editor-basic and editor-export work the same as switching off the editor-all, editor-nonbasic and editor-advanced options, respectively.