HtmlWidget

Revision as of 17:25, 20 January 2010

See also the article on FCKEditor.

Description

Shows a WYSIWYG text area with formatting options to create formatted texts. This is the default widget for the OpenCmsHtml datatype.

Extending edit options for HtmlWidget

It is possible to extend the HtmlWidget that is used by the XMLContent forms so that the different OpenCms galleries can be accessed for creating nice html. This is quite easily done by opening up the XML Schema file for the XML Content type you wish to extend, and add the following code:

<layouts>
  <layout element="Text" widget="HtmlWidget" configuration="source,link,anchor,formatselect,image,table,imagegallery,downloadgallery,linkgallery,htmlgallery,tablegallery,height:400px" />
</layouts>

inside the following tags:

<xsd:annotation>
  <xsd:appinfo>
    ... Add the layouts element here ...
  </xsd:appinfo>
</xsd:annotation>

Of course you can modify the configuration attribute to display only the extra elements you would like to make available to the content creators.

Extending edit options for HtmlWidget since OpenCms 7.5.1

Extract from a mailing list post:

...
from 7.5.1 on, we enhanced the HTML widget configuration options. 
There is a new option to hide buttons, e.g. hidebuttons:bold;italic;underline
It is also now possible to set global widget configurations in the opencms-vfs.xml file by adding
a "configuration" attribute to the "widget" elements. As long as there is no 
individual configuration set in a XSD, the global configuration is then used.
Have a closer look at the JavaDoc of org.opencms.widgets.CmsHtmlWidgetOption to learn about the configuration details.
...
How about adding buttons like FontName, FontSize or TextColor? Is it 
need to add "configuration" attributes in HtmlWidget in opencms-vfs.xml?
...
therefore you have to configure your own button bar, preferrably in opencms-vfs.xml.
For each button that is already in the org.opencms.widgets.CmsHtmlWidgetOption.BUTTONBAR_DEFAULT constant,
you have to use the exact name used there. Insert your additional buttons at the desired position.
It would be a good idea to copy the contants value and enhance this.
Important: All buttons that are possible should be part of a button bar layout definition;
otherwise they will not be shown at all.
Example:
buttonbar:[;source;-;undo;redo;-;find;replace;-;selectall;removeformat;-;cut;copy;paste;-;FontName;FontSize;] ... (even more buttons)
...

Link to complete message

Adding a style box with your custom styles

It is possible to add a style box with your custom styles to the FCKEditors toolbar. First, set up your stylesheet and the configuration xml file in the resources directory of your module. You find a description how to do this on page FCKEditor. Then reference the stylesheet and the configuration xml in the configuration attribute of the layout element

<layouts>
  <layout element="Text" widget="HtmlWidget" configuration="css:/system/modules/MODULE_NAME/resources/css/my.css,stylesxml:/system/modules/MODULE_NAME/resources/css/my.css_style.xml, ... OTHER OPTIONS" />
</layouts>

External References

• The javadoc of class CmsHtmlWidget lists all configuration settings that can be used for the HTML editor widget of resources that use a xml content resource type
• Discussion on how to add CSS styles to the HTML editor of xml content types (discusses additional config settings "css:" and "stylesxml:")