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 的光標(biāo)跳到行首的問題
 this.$el.innerHTML = newVal || ''
 }
 }
 },
 methods: {
 handleInput (e) {
 this.$emit('input', e.target.innerHTML)
 }
 },
 mounted () {
 // 處理初始值的情況
 this.$el.innerHTML = this.value
 // 這里當(dāng)然可以自定義 options 啦
 this.editor = new MediumEditor(this.$el, Object.assign({}, this.options))
 // medium-editor 的 api，監(jiān)聽內(nèi)容改變化
 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
}