FCKeditor是一個專門使用在網頁上屬於開放源代碼的所見即所得文字編輯器.它志於輕量化,不需要太複雜的安裝步驟即可使用.它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的編程語言相結合.「FCKeditor」名稱中的「FCK」 是這個編輯器的作者的名字Frederico Caldeira Knabben的縮寫.
FCKeditor控制項請到官方網站下載http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip、fckeditor-java-demo-2.4.1.zip、fckeditor-java-2.4.1-bin.zip裡面的一些內容,讀者可以自行下載.
1. 解開壓縮包FCKeditor_2.6.3.zip,將其中的fckeditor文件夾複製到WEB-INF下面,後面可以直接使用.
2. 在頁面中使用FCKeditor有兩種方式.
方式一：JavaScript的方式
(1)直接使用,見method1.html
| < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < html> < head> < script type="text/javascript" src="fckeditor/fckeditor.js"> < /script> < /head> < body> |
| < br> < script type="text/javascript"> var oFCKeditor = new FCKeditor('FCKeditor1') ; oFCKeditor.BasePath = "fckeditor/"; //oFCKeditor.BasePath = "/FCKEditTest/fckeditor/"; oFCKeditor.Width="50%"; oFCKeditor.Height="400"; oFCKeditor.Value="initial value"; //oFCKeditor.ToolbarSet="Basic"; //默認是defaultoFCKeditor.ToolbarSet="Default"; oFCKeditor.Create() ; < /script> < hr> < /body> < /html> |
(2)通過Textarea,祥見method2.html
| < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < html> < head> < script type="text/javascript" src="fckeditor/fckeditor.js"> < /script> < script type="text/javascript">window.onload=function() {var oFCKeditor = new FCKeditor('MyTextarea') ; oFCKeditor.BasePath = "fckeditor/"; //oFCKeditor.BasePath = "/FCKEditTest/fckeditor/";oFCKeditor.ReplaceTextarea(); } < /script> < /head> < body> |
| < br> < textarea rows="4" cols="60" name="MyTextarea">this is a value < /textarea> < /body> < /html> |
在使用標籤之前,需要搭建環境.將fckeditor-java-2.4.1-bin.zip包中的fckeditor-java-core-2.4.1.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、slf4j-api-1.5.2.jar以及包fckeditor-java-demo-2.4.1.zip中的slf4j-simple-1.5.2.jar複製到lib目錄下,並構建環境.
構建完后,就可以在JSP頁面中進行使用.祥見頁面method_jsp.jsp
| < %@ page language="java" import="java.util.*" pageEncoding="utf-8"%> < %@ taglib uri="http://java.fckeditor.net" prefix="FCK"%> < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < html> < head> < title>method_jsp.jsp< /title> < /head> < body> |
早些版本必需將fckeditor的Value屬性必需指定對應的值,且值不能為空.而此處版本是2.6.3,該問題已經解決.
| < FCK:editor instanceName="myEditor" basePath="/fckeditor"> < /FCK:editor> < /body> < /html> |
[火星人 ] JSP頁面中使用FCKeditor控制項已經有306次圍觀
