0x00 前言
VueJS 社区里面关于富文本编辑器的集成也不少了,但是之前小调研了一下,基本上就是 quill,medium-editor,因为之前用 AngularJS 用过 medium-editor,并且需要自定义某些按钮,而且最好还是选中弹出式的,所以就决定用 medium-editor。
社区里面 star 较多的就是这个了:vue-medium-editor,但是打开它官网,看了看文档,越看越别扭,来看看它用法:
gosh,传这么多参数,我只想要一个简单的 editor 啊
打开源码一看,就 62 行,所以决定自己动手来一个简单点的
0x01 最简版
最简版,其实就在 vue 组件中实例化一下 medium-editor 就可以了
完成~,是不是很简单~~哈哈,最简版是一个 v-html 控制的,但是会有自动跳转到首行的问题,所以这里是最终版,细节问题看注释啦
0x02 用法
咋用呢?很简单,在其他组件中这样:
当然 你首先得安装 medium-editor的 js 和 css了
0x03 自定义 button
下面是我项目中用到的自定义 button 的相关代码,是一个 buttonBuilder:
简单来说就是给选中的文字加一些 class (上面是 fs-xx 之类的),其中需要引一个鼠标选中的库 rangy,挺烦人的也是,然后在 text-editor 中这样用:
先实例化
再放到 editor 上
当然上面实例化的步骤不一定要写到这个组件里面,配置 options 也可以从组件外传入
0x04 细节和坑
1、这里用到了 v-model 的自定义实现,详见官方文档:v-model
简单来说呢就是 props: value ,和 this.$emit('input',model) 就可以实现在组件中模拟 v-model 啦
2、多个 editor 使用的自定义button 实例的问题。由于我自己应用的时候有两个挨着的
要解决这个也很简单,修改这一行:
将自定义的 options 深复制一下,这里借助了 lodash 的函数。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。