CKEditor自定义ToolBar按钮

工具栏定义是包含要显示在编辑器中所有可用工具栏的行元素的JavaScript数组。

虽然CKEditor的是一个全功能的所见即所得的编辑器，不是所有的选项，可能需要在所有情况下。正因为如此，自定义工具栏是在与CKEditor的处理​​最常见的和必需的任务之一。

先将CKEditor下载回来解压缩丢到网站目录中，在ckeditor文件夹下找到"config.js"文件（默认下没有以下内容需要添加），

该toolbar_name设置，其中name元素是用来识别工具栏中的工具栏设置的名称。下面的代码片段包含默认CKEditor的工具栏设置。

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']];

在上面的代码中（就像在默认的CKEditor配置）两大工具栏定义已定义。第一种全部功能，第二个是基本。工具栏被设置为使用完整定义。可以根据自身需要调整。

本文来自杜保良博客，转载请标明出处：http://www.dubaoliang.com/view/27.html