百度编辑器ueditor使用教程(2)定制工具栏

我们上一节初步体验了百度编辑器ueditor的视图化，个人感觉比ckeditor好看，这是仁者见仁的事，不多说。由于我们在实际应用的时候，实际上并不需要百度编辑器上面的全部工具类，那么根据百度ueditor官方文档，UEditor 工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求。

第一步：方法1，修改 ueditor.config.js 里面的 toolbars

1，咱们首先列出完整的toolbars工具栏按钮图标列表，开发者只要在以下配置项中选择想要的功能即可

//V型知识库 www.vxzsk.com 
toolbars: [
    [
        'anchor', //锚点
        'undo', //撤销
        'redo', //重做
        'bold', //加粗
        'indent', //首行缩进
        'snapscreen', //截图
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'fontborder', //字符边框
        'superscript', //上标
        'formatmatch', //格式刷
        'source', //源代码
        'blockquote', //引用
        'pasteplain', //纯文本粘贴模式
        'selectall', //全选
        'print', //打印
        'preview', //预览
        'horizontal', //分隔线
        'removeformat', //清除格式
        'time', //时间
        'date', //日期
        'unlink', //取消链接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合并单元格
        'mergedown', //下合并单元格
        'deleterow', //删除行
        'deletecol', //删除列
        'splittorows', //拆分成行
        'splittocols', //拆分成列
        'splittocells', //完全拆分单元格
        'deletecaption', //删除表格标题
        'inserttitle', //插入标题
        'mergecells', //合并多个单元格
        'deletetable', //删除表格
        'cleardoc', //清空文档
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //代码语言
        'fontfamily', //字体
        'fontsize', //字号
        'paragraph', //段落格式
        'simpleupload', //单图上传
        'insertimage', //多图上传
        'edittable', //表格属性
        'edittd', //单元格属性
        'link', //超链接
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查询替换
        'map', //Baidu地图
        'gmap', //Google地图
        'insertvideo', //视频
        'help', //帮助
        'justifyleft', //居左对齐
        'justifyright', //居右对齐
        'justifycenter', //居中对齐
        'justifyjustify', //两端对齐
        'forecolor', //字体颜色
        'backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //无序列表
        'fullscreen', //全屏
        'directionalityltr', //从左向右输入
        'directionalityrtl', //从右向左输入
        'rowspacingtop', //段前距
        'rowspacingbottom', //段后距
        'pagebreak', //分页
        'insertframe', //插入Iframe
        'imagenone', //默认
        'imageleft', //左浮动
        'imageright', //右浮动
        'attachment', //附件
        'imagecenter', //居中
        'wordimage', //图片转存
        'lineheight', //行间距
        'edittip ', //编辑提示
        'customstyle', //自定义标题
        'autotypeset', //自动排版
        'webapp', //百度应用
        'touppercase', //字母大写
        'tolowercase', //字母小写
        'background', //背景
        'template', //模板
        'scrawl', //涂鸦
        'music', //音乐
        'inserttable', //插入表格
        'drafts', // 从草稿箱加载
        'charts', // 图表
    ]]

2，打开工程项目中的百度编辑器依赖文件ueditor.config.js，在配置文件中找到toolbars选项。

如上图中红色圈部分，fullscreen在工具栏第一个位置，全屏的意思，然后我们把它去掉，打开百度ueditor编辑器的jsp界面，我们可以看到全屏的放大镜图标已经没有了。

如上图所示，红色圈圈部分以前是全屏按钮，现在已经是一片空白，没有了。

第二步:方法2,实例化编辑器的时候传入 toolbars 参数，本人比较推荐此方法，不用修改百度编辑器的核心配置js文件最好。

打开ueditor.jsp界面(案例初始化百度编辑器的新建界面，读者可自行新建)，我们可以看到，初始化ueditor的代码为：

var ue = UE.getEditor('container');

 1，toolbars 简单列表

toolbars: [
    ['fullscreen', 'source', 'undo', 'redo', 'bold']
]

2，toolbars 多行列表

toolbars: [
    ['fullscreen', 'source', 'undo', 'redo'],
    ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]

3，修改初始化编辑器代码var ue = UE.getEditor('container')为

var ue = UE.getEditor('container', {
    toolbars: [
        ['fullscreen', 'source', 'undo', 'redo', 'bold']
    ]
});

运行jsp界面，效果如下

3，修改初始化编辑器代码var ue = UE.getEditor('container')为

 var ue = UE.getEditor('container', {
    toolbars: [
    ['fullscreen', 'source', 'undo', 'redo'],
    ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]
});

运行jsp界面，效果图如下

就像百度编辑器UEditor所宣传轻量、可定制、注重用户体验一样，我们终于初步体验了一番可定制的好处，在接下来的章节会介绍更多的可定制方法，敬请期待。