1) Download the sources from site.

2) Create a folder under ${contextroot}/js/tinymceplugins/syntaxhighlight and extract all the contents of the downloaded zip/sources here. Remember that the folder name should be ‘tinymceplugin’ as the TinyMCE javascript plugin looks for this folder for additional plugins if configured. Also note that ${contextroot} is your web application context root.

3) The different languages you need to support are present under ${contextroot}/js/tinymceplugins/syntaxhighlight/dialog.htm, where you retain only the relevant ones. For XML/XHTML support, you may need to add 2 additional lines, which would convert the XML tags to respective character equivalents in ${contextroot}/js/tinymceplugins/syntaxhighlight/js/dialog.js

content_text = f.syntaxhl_code.value.replace(/</g,"&lt;");
 content_text = content_text.replace(/>/g,"&gt;");
 textarea_output +=  content_text;

4) Create a properties file rteplugins.properties (name with custom plugins are resolved) with a property containing full path (relative with regard to ${contextroot}) of the editor_plugin.js from the downloaded sources as given below. Remember that property name used here (syntaxhl) is the plugin name used in the richtext editor configuration

syntaxhl=/js/tinymceplugins/syntaxhighlight/editor_plugin.js

5) The richfaces text editor configuration should be modified as below:

<rich:editor id="description" width="750" height="250" value="#{mybackingbean.description}"
 theme="advanced" viewMode="visual"  customPlugins="rteplugins" plugins="media,fullscreen,syntaxhl">
          <f:param name="theme_advanced_buttons1"  value="code,bold,italic,underline,fullscreen,justifyleft,justifycenter,justifyright,
                                    fontselect,fontsizeselect,styleprops,tablecontrols,syntaxhl,
                                    search,replace,selectall,media,forecolor,backcolor,cut,copy,paste"/>
          <f:param name="theme_advanced_toolbar_location" value="top" />
          <f:param name="theme_advanced_toolbar_align" value="left" />
          <f:param name="extended_valid_elements" value="pre[name|class]"/>
 </rich:editor>

Note: parameter ‘extended_valid_elements’ identifies valid tags that can be present in the text in raw HTML form.

Well now you are ready to use the rich text editor to contain code snippets. Lets also try to look at how to view code in highlighted format in the next tip.