HtmlWidget

Latest revision as of 21:49, 31 July 2012

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 and add configuration for the Widget at the <layouts> tag of you XSD Schema.

The following "tools" are avaiable for configuration (separated by commas):

• anchor: shows an anchor button that calls the link popup window.
• css:${AbsolutePathToSomeCSS}: renders CSS styles in the WYSIWYG editor, which displays the content accordingly.
• downloadgallery: shows a button that calls a download gallery popup window.
• formatselect: shows a selector for common format options.
• fullpage: shows the editor in full page mode.
• height:${editorHeight}: specify the widget height in the API in pixels or % ("300px" or "10%").
• htmlgallery: shows a button that calls a html gallery popup window.
• image: shows a button that calls the image popup window.
• imagegallery: shows a button that calls a image gallery popup window.
• link: shows a button that calls the link popup window.
• linkgallery: shows a button that calls a link gallery popup window.
• source: shows a button that toggle editors between HTML source and WYSIWYG mode.
• table: shows a button that calls the html table window.
• tablegallery: shows a button that calls a table gallery popup window.
• stylesxml:${AbsolutePathToSomeXML}: a FCKeditor tool where you can link to a XML with custom CSS styles for use in the editor, formatted like:

<?xml version="1.0" encoding="utf-8" ?>
<styles >
	<style name="base" element="div">
		<attribute name="class" value="base" />
	</style >
	<style name="base hr" element="hr" />
	<style name="banner" element="img">
		<attribute name="style" value="padding:12px" />
		<attribute name="border" value="0" />
	</style >	
</styles>

Finally, a working example. Insert some code like...

 <layouts>
	<layout element="Text" widget="HtmlWidget" 
		configuration="source,link,anchor,formatselect,image,height:400px" />
 </layouts>

...inside the following tags...

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

... like this:

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
	<xsd:include schemaLocation="opencms://opencms-xmlcontent.xsd"/>	

	<xsd:element name="Example" type="OpenCmsExamples"/>

	<xsd:complexType name="OpenCmsExamples">
		<xsd:sequence>
			<xsd:element name="Example" type="OpenCmsExample" minOccurs="0" maxOccurs="unbounded"/>
		</xsd:sequence>
	</xsd:complexType>

	<xsd:complexType name="OpenCmsExample">
		<xsd:sequence>
		
			<xsd:element name="ExampleField" type="OpenCmsString" minOccurs="0" maxOccurs="1" />
					
		</xsd:sequence>
		<xsd:attribute name="language" type="OpenCmsLocale" use="optional"/>
	</xsd:complexType>
	
	<xsd:annotation>
		<xsd:appinfo>
			<resourcebundle name="org.example.workplace" />
			<preview uri="${previewtempfile}" />
			<mappings/>
			 <layouts>
				<layout element="Text" widget="HtmlWidget" 
					configuration="source,link,anchor,formatselect,image,height:400px" />
			</layouts>
			<validationrules/>
			<defaults/>
			<relations/>
		</xsd:appinfo>	
	</xsd:annotation>
	
</xsd:schema>

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

Link to Javadoc, where all configuration options are described

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>

See also

• XMLContent

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:")