0x00 前言
VueJS 社区里面关于富文本编辑器的集成也不少了，但是之前小调研了一下，基本上就是 quill,medium-editor，因为之前用 AngularJS 用过 medium-editor，并且需要自定义某些按钮，而且最好还是选中弹出式的，所以就决定用 medium-editor。
社区里面 star 较多的就是这个了：vue-medium-editor，但是打开它官网，看了看文档，越看越别扭，来看看它用法：
<!-- index.html -->
<medium-editor :text='myText' :options='options' custom-tag='h2' v-on:edit='applyTextEdit'>gosh，传这么多参数，我只想要一个简单的 editor 啊
打开源码一看，就 62 行，所以决定自己动手来一个简单点的
0x01 最简版
最简版，其实就在 vue 组件中实例化一下 medium-editor 就可以了
<template>
<div class="textEditor" @input="handleInput">
</div>
</template>
<script>
/* eslint-disable no-new */
import MediumEditor from 'medium-editor'
export default {
props: {
value: String,
options: {
type: Object,
default: () => ({})
}
},
data () {
return {
editor: null // 用来存放 editor
}
},
watch: {
// refer: https://github.com/FranzSkuffka/vue-medium-editor/blob/master/index.js
value (newVal, oldVal) {
if (newVal !== this.$el.innerHTML) { // 用 $el.innerHTML 来解决 v-html 的光标跳到行首的问题
this.$el.innerHTML = newVal || ''
}
}
},
methods: {
handleInput (e) {
this.$emit('input', e.target.innerHTML)
}
},
mounted () {
// 处理初始值的情况
this.$el.innerHTML = this.value
// 这里当然可以自定义 options 啦
this.editor = new MediumEditor(this.$el, Object.assign({}, this.options))
// medium-editor 的 api，监听内容改变化
this.editor.subscribe('editableInput', this.handleInput)
},
beforeDestroy () {
this.editor.unsubscribe('editableInput', this.handleInput)
this.editor.destroy()
}
}
</script>
完成~，是不是很简单~~哈哈，最简版是一个 v-html 控制的，但是会有自动跳转到首行的问题，所以这里是最终版，细节问题看注释啦
0x02 用法
咋用呢？很简单，在其他组件中这样：
<text-editor v-model="vm.richText"></text-editor>当然 你首先得安装 medium-editor的 js 和 css了
0x03 自定义 button
下面是我项目中用到的自定义 button 的相关代码，是一个 buttonBuilder:
import MediumEditor from 'medium-editor'
