TinyMCE is a powerful, most used WYSIWYG editor control for web browsers. It comes with the following features:
- Easy to integrate, takes only a couple lines of code.
- Theme and template support.
- Easy to extend with custom code. (Plugins and callbacks)
Customizable HTML output. Block elements and force attributes. - International language support (Language packs).
- Multiple browser support, currently Mozilla (PC, Mac and Linux), MSIE (PC) and FireFox (PC, Mac and Linux) and some limited Safari support.
TinyMCE converts HTML TEXTAREA fields or other HTML elements to editor instances as shown in code.
To use TinyMCE, you need to download scripts files. The downloaded file structure is shown below however you need to configure only jscripts folder on your web server.
/tinymce/
/tinymce/docs/
/tinymce/docs/zh_cn/
/tinymce/examples/
/tinymce/examples/zh_cn/
/tinymce/jscripts/
/tinymce/jscripts/tiny_mce/
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/plugins/<plugin folders>
/tinymce/jscripts/tiny_mce/themes/
/tinymce/jscripts/tiny_mce/themes/advanced/
/tinymce/jscripts/tiny_mce/themes/default/
/tinymce/jscripts/tiny_mce/themes/simple/
The examples with downloaded package has several implementations of text editors using TinyMCE.
Following is snippet of full feature editor using TinyMCE with code.
When you submit contents in TextArea, TintMCE provides various APIs to process contents. Obviously you need to write some code for processing the contents. (e.g. saving in database)
Following is the code to add full feature editor using TinyMCE copied from this location.
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,,bold,italic,underline,strikethrough,,justifyleft,justifycenter,justifyright,justifyfull,,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,,search,replace,,bullist,numlist,,outdent,indent,blockquote,,undo,redo,,link,unlink,anchor,image,cleanup,help,code,,insertdate,inserttime,preview,,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,,hr,removeformat,visualaid,,sub,sup,,charmap,emotions,iespell,media,advhr,,print,,ltr,rtl,,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,,styleprops,spellchecker,,cite,abbr,acronym,del,ins,attribs,,visualchars,nonbreaking,template,blockquote,pagebreak,,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
<form method="post" action="somepage">
<textarea name="content" style="width:100%">
</textarea>
</form>
