VueJS 集成 Medium Editor的示例代码 （自定义编辑器按钮）

<!-- index.html --><medium-editor :text='myText' :options='options' custom-tag='h2' v-on:edit='applyTextEdit'>

<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>

<text-editor v-model="vm.richText"></text-editor>

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: <textarea> 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'])}

import ButtonBuilder from './buttonBuilder'var editorOptions = { toolbar: {  buttons: ['bold', 'italic', 'underline', 'removeFormat', 'p3', 'p4', 'p5', 'p6'] }, buttonLabels: 'fontawesome', // use font-awesome icons for other buttons extensions: {  p3: new ButtonBuilder.P3(),  p4: new ButtonBuilder.P4(),  p5: new ButtonBuilder.P5(),  p6: new ButtonBuilder.P6() }, placeholder: false}