龙空技术网

VUE前端编程:富文本编辑器wangEditor 5 工具条定制

小小IT流 582

前言:

现时我们对“vue实现富文本编辑器 加版本号”大体比较关怀,小伙伴们都需要了解一些“vue实现富文本编辑器 加版本号”的相关文章。那么小编在网摘上收集了一些对于“vue实现富文本编辑器 加版本号””的相关知识,希望看官们能喜欢,小伙伴们快快来学习一下吧!

目前开源的富文本编辑器中,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>格式的方式引入。

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

标签: #vue实现富文本编辑器 加版本号 #vue富文本编辑器移动端