VueJS中集成MediumEditor的示例分析
这篇文章将为大家详细讲解有关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:
import MediumEditor from 'medium-editor'
import rangy from 'rangy/lib/rangy-core.js'
import 'rangy/lib/rangy-classapplier'
import 'rangy/lib/rangy-highlighter'
import 'rangy/lib/rangy-selectionsaverestore'
import 'rangy/lib/rangy-textrange'
import 'rangy/lib/rangy-serializer'
const pHash = {
p1: { name: 'p1', class: 'fs-36' },
p2: { name: 'p2', class: 'fs-30' },
p3: { name: 'p3', class: 'fs-24' },
p4: { name: 'p4', class: 'fs-18' },
p5: { name: 'p5', class: 'fs-14' },
p6: { name: 'p6', class: 'fs-12' }
}
function pButtonCreator (p) {
return MediumEditor.Extension.extend({
name: p.name,
init: function () {
this.classApplier = rangy.createClassApplier(p.class, {
elementTagName: 'span',
normalize: false
})
this.button = this.document.createElement('button')
this.button.classList.add('medium-editor-action')
this.button.innerHTML = p.name
this.button.title = p.class
this.on(this.button, 'click', this.handleClick.bind(this))
},
getButton: function () {
return this.button
},
clearFontSize: function () {
MediumEditor.selection.getSelectedElements(this.document).forEach(function (el) {
if (el.nodeName.toLowerCase() === 'span' && el.hasAttribute('class')) {
el.removeAttribute('class')
}
})
},
handleClick: function (event) {
this.clearFontSize()
this.classApplier.toggleSelection()
// Ensure the editor knows about an html change so watchers are notified
// ie: 