Fckeditor jsp使用實例,自定義Fckeditor的工具欄

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       背景色




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章