CKEditor中的工具欄默認顯示所有功能按鈕。出于安全的原因,、或者是簡化的原因,,需要對這個工具欄進行自定義設(shè)置。CKEditor工具欄自定義配置非常簡單,,按下述步驟完成即可(假設(shè)已經(jīng)完成CKEditor的安裝):
編輯ckeditor目錄下的的config.js文件,,默認的是下面的工具欄代碼(特別說明:config.js中沒有下面的代碼,默認就是顯示全部按鈕,,但如果對工具欄進行自定義,最好的辦法還是把該代碼全部復(fù)制粘貼,,然后再刪除一個個不需要的按鈕)
config.toolbar = 'Full';
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
注意工具按鈕是分組的,,一個name內(nèi)的大括號就是一個工具按鈕分組,items后邊是具體的按鈕,,我們可以對這些內(nèi)容進行適當?shù)膭h除,。比如將config.js做成如下的內(nèi)容:
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Source','NewPage','Preview' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'insert', items :[ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
,'Iframe' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
];
};
上代碼創(chuàng)建的CKEditor工具欄就如下圖所示:
工具欄的定義英漢對照說明:
Source = 源碼模式
-
Save = 保存(提交表單)
NewPage = 新建
Preview = 預(yù)覽
- = 分割線
Templates = 模板
Cut = 剪切
Copy = 復(fù)制
Paste = 粘貼
PasteText = 粘貼為無格式文本
PasteFromWord = 從 MS WORD 粘貼
-
Print = 打印
SpellChecker = 拼寫檢查
Scayt = 即時拼寫檢查
Undo = 撤銷
Redo = 重做
-
Find = 查找
Replace = 替換
-
SelectAll = 全選
RemoveFormat = 清除格式
Form = 表單
Checkbox = 復(fù)選框
Radio = 單選框
TextField = 單行文本
Textarea = 多行文本
Select = 列表/菜單
Button = 按鈕
ImageButton = 圖片按鈕
HiddenField = 隱藏域
/
Bold = 加粗
Italic = 傾斜
Underline = 下劃線
Strike = 刪除線
-
Subscript = 下標
Superscript = 上標
NumberedList = 編號列表
BulletedList = 項目列表
-
Outdent = 減少縮進量
Indent = 增加縮進量
Blockquote = 塊引用
CreateDiv = 創(chuàng)建DIV容器
JustifyLeft = 左對齊
JustifyCenter = 居中
JustifyRight = 右對齊
JustifyBlock = 兩端對齊
BidiLtr = 文字方向從左到右
BidiRtl = 文字方向從右到左
Link = 插入/編輯超鏈接(上傳文件)
Unlink = 取消超鏈接
Anchor = 插入/編輯錨點鏈接
Image = 圖像(上傳)
Flash = 動畫(上傳)
Table = 表格
HorizontalRule = 插入水平線
Smiley = 插入表情
SpecialChar = 插入特殊符號
PageBreak = 插入分頁符
/
Styles = 樣式快捷方式
Format = 文本格式
Font = 字體
FontSize = 文字大小
TextColor = 文字顏色
BGColor = 背景顏色
Maximize = 全屏編輯模式
ShowBlocks = 顯示區(qū)塊
-
About = 顯示關(guān)于
本文參照了CKEditor官網(wǎng)相關(guān)幫助文件,地址為http://docs./CKEditor_3.x/Developers_Guide/Toolbar
|