You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by Apache Wiki <wi...@apache.org> on 2006/02/07 08:39:49 UTC
[Myfaces Wiki] Update of "WYSIWYG Editor" by AndreasMitter
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/WYSIWYG_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>
}}}