Integration of TinyMCE WYSIWYG Editor

Author: Andreas Mitter

This page should help to integrate the TinyMCE Editor into your MyFaces Application. I have added this WIKI Page, because the <t:inputHtml> Kupu Editor doesn't work with IE Browser and has some bugs

* First of all download the TinyMCE Sources at http://tinymce.moxiecode.com/download.php

* Secondly extract the tiny_mce directory from within tinymce/jscripts/tiny_mce and put it in the root of your web directory

* In the next step just add the following code to your JSF Page (in the head section), where you want to display the Editor. This turns your <h:inputTextarea> into WYSIWYG Editors (Keep attention that if you are using a different directory, make sure you change the location of tiny_mce.js in the below code accordingly.)

Example

<script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
   <script type="text/javascript">
        tinyMCE.init({
        mode : "textareas",
        theme : "simple",
        width : "640",
        height : "480"
 });
</script>

* Finally just add a <h:inputTextarea> into your JSF Code

 <h:inputTextarea id="myTextArea" value="#{infoMessagesDto.htmleditortext}" rows="10" cols="50" style="width: 100%"/>

More configuration

* You can easily extend the HTML Editor. All configuration examples can be found under: http://tinymce.moxiecode.com/tinymce/docs/index.html and http://tinymce.moxiecode.com/tinymce/docs/reference_buttons.html

For example: A rich Editor with lots of new buttons

  <script src="./tiny_mce/tiny_mce.js" type="text/javascript"></script>
            <script type="text/javascript">
                tinyMCE.init({
                    mode : "textareas",
                    theme : "advanced",
                    width : "1800",
                    height : "400",
                    language : "de",
                    plugins : "preview, emotions, iespell, print, fullscreen, zoom, advhr, directionality, searchreplace, insertdatetime,  anchor, newdocument, separator,  cut, copy, paste,  forecolor, backcolor, charmap, visualaid",
                    theme_advanced_buttons3_add : "preview, emotions, iespell, print, fullscreen, zoom, advhr, ltr,rtl, search,replace,insertdate,inserttime, anchor, newdocument, separator,  cut, copy, paste, forecolor, backcolor, charmap, visualaid",
                    plugin_preview_width : "500",
                    plugin_preview_height : "600",
                    fullscreen_settings : {
                        theme_advanced_path_location : "top"
                     },
                    extended_valid_elements : "hr[class|width|size|noshade]",
                    plugin_insertdate_dateFormat : "%Y-%m-%d",
                    plugin_insertdate_timeFormat : "%H:%M:%S"
                });
    </script>

Integration of the Dojo Editor

Since MyFaces 1.1.2 there is a Dojo foundation within the MyFaces codebase. At the time of writing the foundation is very limited but already allows full access to the Dojo infrastructure. You can use dojo to switch to the Dojo internal html editor.

The easiest way until there is an explicit html edit switch is to use the dojo styleclass infrastructure to style a textArea control:

example:

<s:dojoInitializer require="dojo.widget.Editor"/>       

<h:form>
<h:inputTextarea id="editarea2" styleClass="dojo-Editor" value="hello
world">
                        
</h:inputTextarea>
<h:commandLink action="submitted" id="submitted" value="[Submit]"/>
</h:form>

The dojo initializer adds the needed imports to the code and also adds via the require the Editor subcontrol. Within the form, the styleClass attribute of "dojo-Editor" causes the textArea to become an html editor.

If you want to customize the attributes of the dojo editor, here is another way to set up the editor. The following example removes the unused save/cancel buttons but adds font controls. This example was tested in facelets. You probably need to add <f:verbatim> around the script tags following the input area under JSP. All user-configurable names are indicated by the "my" prefix.

<s:dojoInitializer require="dojo.widget.Editor"/>       

<h:form id="myFormId">
        <h:inputTextarea id="myId"
                value="#{myBackingBean.myProperty}"/>            
        
        <script type="text/javascript">
        // <![CDATA[
        var editorArgs = {
            items: ["textGroup", "blockGroup", "justifyGroup", "colorGroup", "listGroup", "indentGroup", "linkGroup"]
        };
        var editor = dojo.widget.fromScript("Editor", editorArgs,
                                            dojo.byId("myFormId:myId"));
        // ]]>  
        </script>
</h:form>

Also note that the examples requires a fully-qualified path to the id of the input component (the JSF client-id). You could alternatively use t:inputTextArea forceId="true" and use dojo.byId("myId").

WYSIWYG_Editor (last edited 2010-05-07 08:14:13 by JakobKorherr)