WYSIWYG Editor Configuration
WYSIWYG Editor Configuration
Contents
Welcome to the WYSIWYG editor configuration guide. This page will help you configure XWiki's GWT rich text editor so that it meets your needs.
Quick Reference
Configuration Parameters
Parameter Name | Description | Default Value |
---|---|---|
allowExternalImages | Specifies if inserting external images is allowed or not. Setting this configuration parameter to false hides the External tab from the Insert Image dialog. | true |
colors | The list of colors available on the color picker. Colors are specified by their hex code and are separated by comma. | #000000,#444444,#666666,#999999,#CCCCCC,#EEEEEE,#F3F3F3,#FFFFFF, #FF0000,#FF9900,#FFFF00,#00FF00,#00FFFF,#0000FF,#9900FF,#FF00FF, #F4CCCC,#FCE5CD,#FFF2CC,#D9EAD3,#D0E0E3,#CFE2F3,#D9D2E9,#EAD1DC, #EA9999,#F9CB9C,#FFE599,#B6D7A8,#A2C4C9,#9FC5E8,#B4A7D6,#D5A6BD, #E06666,#F6B26B,#FFD966,#93C47D,#76A5AF,#6FA8DC,#8E7CC3,#C27BA0, #CC0000,#E69138,#F1C232,#6AA84F,#45818E,#3D85C6,#674EA7,#A64D79, #990000,#B45F06,#BF9000,#38761D,#134F5C,#0B5394,#351C75,#741B47, #660000,#783F04,#7F6000,#274E13,#0C343D,#073763,#20124D,#4C1130 |
colorsPerRow | The maximum number of colors the color picker should display on a row | 8 |
convertInput | Whether to convert the input (the value taken from the hook element) or not. Set this parameter to true if the value of the plain text area being replaced represents wiki syntax. Leave it unset or set it to false if the WYSIWYG editor input is HTML | false |
debug | Whether to load the editor in debug mode or not. In debug mode you can see the dirty HTML generated by the editor, the cleaned HTML, the source text and the rendering events that were triggered during the conversion of the cleaned HTML to source text. The syntax of the source text is controlled by the syntax parameter. | false |
defaultEditor | Specifies the default tab when displayTabs is true. Use wysiwyg to load initially the WYSIWYG editor and source to load initially the source editor. | source |
displayTabs | Whether to display the WYSIWYG/Source tabs or not. The source editor is not available when the tabs are not displayed. The default tab is controlled by the defaultEditor parameter. | false |
fontNames | A comma-separated list of font names the user can use to format the text. The font name list box from the toolbar is filled with this list. See font-family CSS property for allowed values. | andale mono, arial, arial black, book antiqua, comic sans ms, courier new, georgia, helvetica, impact, symbol, tahoma, terminal, times new roman, trebuchet ms, verdana, webdings, wingdings |
fontSizes | A comma-separated list of font sizes the user can use to format the text. The font size list box from the toolbar is filled with this list. See font-size CSS property for allowed values. Note that relative sizes (like smaller) are not well detected by the editor. | 8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt |
hookId | The id of the HTML element replaced by the editor. Usually the hook element is a plain text area. | None |
inputURL | The URL of the edited document. Make sure the URL obeys the same origin policy. | about:blank |
insertimages | Set to currentpage to restrict the image upload and image selection to the edited page. This parameter is used by the insert image feature. | None |
linkfiles | Set to currentpage to restrict the attachment upload and attachment selection to the edited page. This parameter is used by the create link to attachment feature. | None |
menu | A space-separated list of editor plugins that should place their menu entries on the top menu bar. The top menu bar is not displayed if this list is empty, which is the case by default. Make sure the plugins you put on the menu bar are loaded by the editor; see the plugins parameter. | Empty string |
page | The name of the edited page. This parameter is used by many plugins in order to be aware of the editing context. See also the space and wiki parameters. | None |
plugins | A space-separated list of editor plugins that will be loaded. Only the plugins that can work off-line, without the need of a service, are loaded by default. If a plugin provides editing features then you have to change the toolbar parameter in order to enabled them. | submit line separator text valign justify list indent history format font color symbol table |
rootUI | A space-separated list of plugins that extend the editor UI. Make sure the specified plugins are loaded; see the plugins parameter. | submit |
space | The space where the edited page resides. This parameter is used by many plugins in order to be aware of the editing context. See also the page and wiki parameter. | None |
styleNames | The list of predefined styles, in JSON format. E.g. [{...}, {"name": "todo", "label": "TODO", "inline": false}, {...}]. A style name is a CSS class name. Only the "name" property is required for each style. "label" equals "name" by default. "inline" is true by default. | [] |
syncPage | The full name of the page edited in real-time. | None |
syncReset | Set to 1 to reset the synchronization during a real-time editing. | 0 |
syntax | The syntax of the edited document. Make sure the specified syntax is supported by the rendering module. Precisely, there has to be a parser and a renderer for the specified syntax. | xhtml/1.0 |
toolbar | A space-separated list of features to be placed on the toolbar. Each feature is provided by a plugin so make sure the required plugins are loaded; see the plugins parameter. You can group features by using the pipe | symbol. To force a multiple line toolbar use the slash / symbol. | bold italic underline strikethrough teletype | subscript superscript | justifyleft justifycenter justifyright justifyfull | unorderedlist orderedlist | outdent indent | undo redo | format | fontname fontsize forecolor backcolor | hr removeformat symbol |
wiki | The wiki where the edited page resides. This parameter is used by many plugins in order to be aware of the editing context. See also the page and space parameter. | None |
Plugins and Features
The Plugin Name, Toolbar Features and Menu columns match the plugins, toolbar and menu configuration parameters from the previous section, respectively.
Plugin Name | Description | Toolbar Features | Menu |
---|---|---|---|
color | Controls the colors used inside the rich text area |
| |
font | Controls the font used. |
| |
format | Applies or removes predefined text styles. |
| |
history | Controls the editing history. |
| |
image | Adds support for inserting and editing images | image | |
import | Adds support for importing external content |
| import |
indent | Allows you to increase or decrease the indentation of list items. |
| |
justify | Controls the text alignment. |
| |
line | Controls the behavior of the Enter key inside the rich text area. | ||
link | Add support for creating and editing different kind of links | link | |
list | Adds support for creating lists |
| |
macro | Adds support for inserting and editing macros |
| macro |
readonly | Allows us to have read-only regions inside the rich text area. The macro plugin depends on it. Read-only elements are marked with the readOnly CSS class name. | ||
separator | Offers different kind of content and toolbar separators |
| |
style | Enhances the editor with the ability to apply predefined styles to the current text selection. |
| |
submit | Ensures that the content of the editor is submitted and also cached by the browser. | ||
symbol | Allows you to insert a special symbol. |
| |
table | Adds support for inserting and editing tables. | table | |
text | Offers standard text formatting. |
| |
valign | Allows you to write simple formulas. |
|
XWiki Preferences
In XWiki Enterprise 2.x the WYSIWYG content editor is configurable using XWiki preferences. Each preference listed below has a matching configuration parameter which it overwrites.
Preference Name | Type | Configuration Parameter |
---|---|---|
wysiwyg.plugins | TextArea | plugins |
wysiwyg.menu | String | menu |
wysiwyg.toolbar | TextArea | toolbar |
Configuration
Administration Section
Starting with XWiki Enterprise 3.0 the recommended way to configure the WYSIWYG content editor is through its global administration section.
XWiki.XWikiPreferences
Edit XWiki.XWikiPreferences page with the object editor and fill the properties specified in the XWiki Preferences quick reference section above. If the XWiki.XWikiPreferences object doesn't have those properties then you'll have to add them to the class. Finally, reload the edited page to see the WYSIWYG editor changes.
Velocity Templates
The WYSIWYG editor is configured by a velocity macro named wysiwyg_storeConfig which can be found in templates/macros.vm. In older versions of XWiki Enterprise (prior to 1.9) the code of the wysiwyg_storeConfig macro is placed in templates/editwysiwygnew.vm. Use the parameters listed in the Configuration Parameters quick reference section to configure the editor. You may have to restart the server in order for the changes to take effect because velocity templates can be cached at application startup.
Custom Skin
You can overwrite the wysiwyg_storeConfig velocity macro from templates/macros.vm in your custom skin. Reload the edited page to see the WYSIWYG editor changes.
Examples
Enable toolbar features
Editing features (e.g. make text bold, change text color) are provided by editor plugins (e.g. text, color). Another way to see this is that similar editing features are grouped together in a plugin (e.g. changing the background color and the text color features form the color plugin). In order to enable a feature and make it available on the toolbar for instance you first have to enable the plugin that provides that feature.
Let's see how you can add the Background Color button to the WYSIWYG editor toolbar. In this example we're going to edit macros.vm template but you can do the same using only XWiki preferences.
First, search for the wysiwyg_storeConfig velocity macro in templates/macros.vm. This macro should have a line like this:
valign list indent history format symbol link image table macro import#if($full && $request.sync) sync#end")))
Add the color plugin:
valign list indent history format symbol link image table macro import#if($full && $request.sync) sync#end")))
The position of the plugin name in the list is not important. What matters is that it appears in the list so the WYSIWYG editor can load it. You can find what plugins are available in Plugins and Features section of this page.
Next you have to add backcolor feature to the toolbar. Change the following line:
subscript superscript | unorderedlist orderedlist | outdent indent | undo redo | format | hr symbol | paste')))
to
subscript superscript | unorderedlist orderedlist | outdent indent | undo redo | format | hr symbol | paste | backcolor')))
You can place the Background Color button anywhere on the toolbar. Just make sure you leave a space before and after, unless its the first or the last feature on the toolbar.
That's it. You have to restart your server because macros.vm is cached by default at application startup. Reload the edited page and you should see the Background Color button appear on the toolbar of your WYSIWYG editor.
Add an 'Insert HTML macro' button on the tool bar
Suppose you use the HTML macro very often and thus you'd like to have a quick way to insert it from the tool bar. You don't use the HTML macro that often? No problem, it works with any macro. You just need to follow this steps:
- Add macro:html (or macro:yourCoolMacro if you like yourCoolMacro more) to the tool bar configuration. For XWiki Enterprise 2.x you can follow the previous example. For XWiki Enterprise 3.x please use the administration section.
- Set a custom icon for the tool bar button by adding:
background-image:url("/xwiki/resources/icons/silk/html.gif") !important;
}
to your skin. Of course you can use a different icon and you can replace html with the identifier of your macro. The easiest way to adds this CSS fragment to the skin is by adding a XWiki.StyleSheetExtension object to a page and set it to be always used on the wiki.