目前开源的富文本编辑器中，wangEditor还是不错的，今天做了一下版本5的升级，和之前的版本还是有一些变化，今天总结一下工具条的初步定制。

wangEditor的默认界面如下图所示，常用功能基本上都已经具备了，不过在现实使用过程中，设计者可能基于自身产品的考虑，需要进行定制和修改。

比如从我的角度看：默认大于配置，目前的按钮显得有点多，不是特别直观，因此，我希望调整为以下的样式。

这样的话，我们需要删除部分按钮、修改部分按钮的位置，在vue环境下，其实现的方式如下：

wangEditor的定制机制

Vue中引入wangEditor，大家可以自行到官网上进行代码**，在这里就不赘述了，wangEditor主要通过一个配置对象toolbarConfig来实现工具条的定制。

以下为toolbarConfig的配置对象：

以默认值为基础进行增减

在toolbarConfig中，以工具条的默认值为框架进行增减这种方法比较简单，但缺点是原有工具条的位置不能调整，具体方法是通过对应的增删对象insertKeys和excludeKeys来实现。

• 增加工具条选项

可以在toolbarConfig中加入insertKeys对象为工具条增加按钮，参数包括位置key值

• 删除工具条选项

可以在toolbarConfig中加入excludeKeys对象排除现有工具条对应的按钮，参数为key值

默认工具条的key值的查看，可以通过wangEditor 5 Demo页的控制台查看，获取方式是toolbar.getConfig().toolbarKeys，如下图：

大家可以通过控制台列示的toolbarKeys进行排除，这里单个项和组均可以通过该对象进行排除。

定制全新的toolbar

可以通过在toolbarConfig中加入新的toolbarKeys替换掉默认的工具条配置和布局，但如果要保证原有的功能，则需要保持可以值不变。如需增加新减值，仍是通过insertKeys引入。

这里需要注意构建分组的方法，key值应以‘group-’冠名，并指定title、iconSvg、menuKeys参数，在上面的例子中，即通过将原来的toolbar项移入分组而实现了工具条的简化。这里iconSvg需要引入正常的svg标签，可通过外部拷贝<svg><path…></path></svg>格式的方式引入。

上述定制还比较简单，是基于现有结构的简单调整，后续再补充一些增加新项和上传图片等相关内容的设置，敬请关注。