[Myfaces Wiki] Update of "WYSISWG Editor" by AndreasMitter

[Apache Wiki <wi...@apache.org>]

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.

The following page has been changed by AndreasMitter:
http://wiki.apache.org/myfaces/WYSISWG_Editor

New page:
== 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>
}}}