CKEditor (Toolbar Definition)工具欄自定義配置

JS是大小寫敏感的, 在設置配置文件的時候需要注意

以CKEditor 4為基礎
我們可以通過兩種方式配置CKEditor的工具欄,一種是是通過config.js配置文件設置, 另一種是IN-PAGE方式
1.config.js 方式

//都是數組類型
config.toolbar = [
    ['Source', '-', 'Bold', 'Italic'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], '/',
    ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select','Button']
    ];

config.toolbar = 'Basic';
config.toolbar_Basic =[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
    ];

config.toolbarGroups = [
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'links' },
    { name: 'insert' },
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
];

注意: “/”表示工具欄換行，“-”表示工具圖標之間的中隔線“|”

2.IN-PAGE方式

CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

 

工具欄的定義英漢對照說明：

Source = 源碼模式
-
Save = 保存(提交表單)
NewPage = 新建
Preview = 預覽
- = 分割線
Templates = 模板
Cut = 剪切
Copy = 復制
Paste = 粘貼
PasteText = 粘貼為無格式文本
PasteFromWord = 從 MS WORD 粘貼
-
Print = 打印
SpellChecker = 拼寫檢查
Scayt = 即時拼寫檢查
Undo = 撤銷
Redo = 重做
-
Find = 查找
Replace = 替換
-
SelectAll = 全選
RemoveFormat = 清除格式
Form = 表單
Checkbox = 復選框
Radio = 單選框
TextField = 單行文本
Textarea = 多行文本
Select = 列表/菜單
Button = 按鈕
ImageButton = 圖片按鈕
HiddenField = 隱藏域
/
Bold = 加粗
Italic = 傾斜
Underline = 下划線
Strike = 刪除線
-
Subscript = 下標
Superscript = 上標
NumberedList = 編號列表
BulletedList = 項目列表
-
Outdent = 減少縮進量
Indent = 增加縮進量
Blockquote = 塊引用
CreateDiv = 創建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 = 顯示區塊
-
About = 顯示關於