Written by coregps on Wednesday, August 2nd, 2006 in Java.
Both FCKEditor and TinyMCE are powerful Web-based HTML text editors. They can be integrated into Content Management Systems easily. However, FCKEditor is too big, while TinyMCE lacks of a free file manager/uploader. Today, I found TinyFCK, as its name implies, it integrates the TinyMCE with FCKEditor’s file manager. I’ve integrated it with jsp successfully. The following are my steps:
Step 1 - Download
1. Download the tinyfck archive from http://prdownloads.sourceforge.net/p4a/tinyfck-0.13.zip?download
2. Download the FCKEditor JSP Integration Pack archive from http://prdownloads.sourceforge.net/fckeditor/FCKeditor-2.3.zip?download
Step 2 - Install
1. Unzip the tinyfck archive in a directory named “tinyfck” under your web application(For example, “WebApp/tinyfck”).
2. Unzip the FCKEditor Java Integration Library in a directory named “FCKeditor”, and copy the two archive files “commons-fileupload.jar” and “FCKeditor-2.3.jar” under the web/WEB-INF/lib directory to your web application’s WEB-INF/lib directory(For example, “WebApp/WEB-INF/”).
The final directory structure should look similar to this:
/WebApp/
/tinyfck
/WEB-INF
/lib
Step 3 - Integrate
Append the following servlet and mapping definitions to the WebApp/WEB-INF/web.xml file
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/tinyfck/filemanager/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/tinyfck/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
Step 4 - Usage
1. Add the following code in head tag:
<script language="javascript" type="text/javascript" src="tinyfck/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
plugins : "style,table,advhr,advimage,advlink,emotions,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
content_css : "/example_data/example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js",
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true
//language : "zh_cn_utf8"
});
function fileBrowserCallBack(field_name, url, type, win) {
var connector = "../../filemanager/browser.html?Connector=connectors/jsp/connector";
var enableAutoTypeSelection = true;
var cType;
tinyfck_field = field_name;
tinyfck = win;
switch (type) {
case "image":
cType = "Image";
break;
case "flash":
cType = "Flash";
break;
case "file":
cType = "File";
break;
}
if (enableAutoTypeSelection && cType) {
connector += "&Type=" + cType;
}
window.open(connector, "tinyfck", "modal,width=600,height=400");
}
</script>
2. The textarea used for editting is something like this:
<form method="post">
<textarea id="news_content" name="news_content" style="width: 650px; height: 400px"></textarea>
</form>
