FCKeditor html 文字編輯器的配置應用
(1) 下載應用
① FCKeditor 下載地址
② 把FCKeditor 2.6.5 解壓到專案的 WebRoot 下
③ 解壓fckeditor-java-2.6-bin.zip,把資料夾中的fckeditor-java-core-2.6.jar以及lib中的所有jar包拷貝到你的web程式的lib中，fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷進去（注意：slf4j-api和slf4j-simple的版本一定要一致）。如果你覺得麻煩,那麼就從fckeditor-java-demo-2.5.war中直接將lib資料夾下的所有jar包複製到專案的lib中,效果是一樣的
④ 在web.xml中配置相應的Servlet實現應用
⑤ 把fckeditor-java-demo-2.6.war 中的fckeditor.properties複製到你專案的src中<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern> </servlet-mapping> </web-app>
⑥ 在需要應用的jsp頁面新增
<%@taglib uri="http://java.fckeditor.net" prefix="FCK"%>
⑦ 在要顯示編輯框的地方加入
<FCK:editor instanceName="content" basePath="/fckeditor" value="valuesDemo"></FCK:editor>1.這裡的value就是在文字框內要顯示的內容,可以利用java從作用域中取得物件放在這裡
2.instanceName 的性質就和input中的name是一樣的,利用它進行傳值,對應的java型別是String,可以在資料庫中存入clob
⑧ 通過iframe新增應用
<input id="content" name="content" value="" type="hidden" /><iframe id="content___Frame" frameborder="0" height="200" scrolling="no" width="100%" src="/dsqcb.com/fckeditor/editor/fckeditor.html?InstanceName=content&Toolbar=Default"> </iframe>⑨ 測試頁面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body style="text-align:center;">
<FCK:editor instanceName="content" basePath="/fckeditor" value="valuesDemo"></FCK:editor>
</body>
</html>
⑩ 效果
(2) 10個免費的javascript富文字編輯器 (jQuery and non-jQuery)
MarkitUp - jQuery
一個輕量級的、可定製的和靈活的富文字編輯器，常用在CMS、Blog、論壇等網站上。
markItUp不是一個所見即所得的編輯器，支援一些常用快車鍵和常用的瀏覽器。
jWYSIWYG - jQuery
jWYSIWYG是比較常用的Jquery所見即所得編輯器，提供了html程式碼編輯功能、文字編輯功能，圖片連線功能，從而保證了jWYSIWYG的簡單的特性。
Lightweight RTE- jQuery
Lightweight RTE是一個非常簡單的Jquery富文字編輯器，體積只有7kb。提供了一些基本的文字格式化操作功能。
HTMLBox - jQuery
HTMLBox跨瀏覽器、互動性非常好、開源的Jquery富文字編輯器，在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等常用瀏覽器下測試通過。此編輯器使用者手冊可以幫住你非常容易地把此編輯器整合到自己的Web系統中
D Small Rich Text Editor - jQuery
D Small Rich Text Editor使用了AjaxFileUpload外掛實現圖片上傳功能。
WYMEditor - jQuery
WYMeditor是一個所建即所得Jquery富文字編輯器。支援外掛擴充套件功能、
TinyMCE - non-jQuery
TinyMCE 國內很多網站都在使用，是一個非常不錯的所見即所得編輯器，而且開源。具體功能不再贅述，大家自己發現吧。
fckeditor - Non-jQuery
Fckeditor是一個功能非常強大的富文字編輯器，部落格園有使用此編輯器，我做的大部分專案也使用此編輯器，是asp.net網站的首選，提供了weconfig.xml檔案用來定製符合自己需求的富文字編輯器。完全可以與MS的Word媲美。
Yahoo YUI Rich Text Editor - Non-jQuery
YUI Rich Text Editor是輕量級的富文字編輯器，提供了一些常用的文字編輯功能。
Xinha - Non-jQuery
Xinha是一個所見即所得的富文字編輯器，提供了強大的文字，圖片。視訊。音訊等編輯功能