WYSISWG_Editor

Integration of TinyMCE WYSISWG 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>