VueJS 集成 Medium Editor的示例代码 （自定义编辑器按钮）
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: elements depend on the editableInput event to stay synchronized
this.base.checkContentChanged()
}
})
}
export default {
P1: pButtonCreator(pHash['p1']),P2: pButtonCreator(pHash['p2']),P3: pButtonCreator(pHash['p3']),P4: pButtonCreator(pHash['p4']),P5: pButtonCreator(pHash['p5']),P6: pButtonCreator(pHash['p6'])
}
简单来说就是给选中的文字加一些 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 的函数。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |