jsp頁面引入script
1.下載Fckeditor插件,放入項目web目錄中
http://pan.baidu.com/s/1bn0DIeb (下載自互聯網)
2.根據自己的路徑設置src
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
3.獲取當前項目的網絡URL地址
<%
//web URL
String realPath = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath()+request.getServletPath().substring(0,request.getServletPath().lastIndexOf("/")+1);
//out.println("<br>web URL 路徑:"+realPath+"fckeditor/");
%>
4.添加到forn表單中
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content');
oFCKeditor.BasePath = "<%=realPath%>fckeditor/";
oFCKeditor.Height=300;
oFCKeditor.Width='100%';
oFCKeditor.ToolbarSet='ZqqToolbar';
//oFCKeditor.Value="111111";//默認值,此處修改時,使用讀取出的數據,如: oFCKeditor.Value='<%=content%>'; 內容中有html和css之類的標籤,建議此處使用單引號,或者轉換 content 中的標籤符號。
oFCKeditor.Create();
</script>
5.自定義插件
Fckeditor默認有三種皮膚:default、office2003和silver。
設置皮膚:
打開fckeditor下的fckconfig.js
找到FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
修改default爲office2003或silver。
這樣皮膚就修改成功了(注意:skins目錄在editor下,配置path的時候不需要加上這個目錄)。
自定義工具欄:
同樣在fckeditor下找到fckconfig.js
找到FCKConfig.ToolbarSets[""]=[];
在fckconfig中已經存在兩個工具欄樣式Default和Basic.
Default的功能最全面,代碼如下:
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-,'Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About']
] ;
可以把工具欄想象爲是一個數組,每一對[]中存放的所一個工具的集合,在工具欄上顯示爲一個豎立的分割符(看工具欄最前面)。每一對[]之間以逗號(,)分開。在同一個[]中,可以使用'-'形成豎立的分割符(和前面的不一樣),每個功能按鈕與數組中的''對應。如果工具欄還行,使用'/'符號。
舉例如下(下面是定義的一個只處理文字的工具欄):
FCKConfig.ToolbarSets["zjc"] = [
['Bold','Italic','Underline','TextColor','Image','Smiley','-,'Link','Unlink'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
'/',
['FontFormat','FontName','FontSize']
] ;
6.按鈕自定義說明
EditSource 顯示HTML源代碼
StrikeThrough 刪除線
Save 保存
NewPage 新建空白頁面
Superscrīpt 上標
Subscrīpt 下標
Preview 預覽
JustifyLeft 左對齊
Cut 剪切
Copy 複製
Paste 粘貼
JustifyCenter 居中對齊
JustifyRight 右對齊
JustifyFull 兩端對齊
PasteText 純文本粘貼
InsertOrderedList 自動編號
PasteWord 來自Word的粘貼
InsertUnorderedList 項目符號
Print 打印
Outdent 減少縮進
SpellCheck 拼寫檢查
Indent 增加縮進
Find 查找
ShowTableBorders 顯示錶格線
Replace 替換
ShowDetails 顯示明細
Undo 撤銷
Form 添加Form動作
Redo 還原
Checkbox 複選框
SelectAll 全選
Radio 單選按鈕
RemoveFormat 去除格式
Input 單行文本框
Link 插入/編輯 鏈接
Textarea 滾動文本框
RemoveLink 去除連接
Select 下拉菜單
Anchor 錨點
Button 按鈕
Image 插入/編輯 圖片
ImageButton 圖片按鈕
Table 插入/編輯 表格
Hidden 隱藏
Rule 插入水平線
Zoom 顯示比例
SpecialChar 插入特殊字符
FontStyleAdv 系統字體
UniversalKey 軟鍵盤
FontStyle 字體樣式
Smiley 插入表情符號
FontFormat 字體格式
About 關於
Font 字體
Bold 粗體
FontSize 字體大小
Italic 斜體
TextColor 文字顏色
Underline 下劃線
BGColor 背景色