VueJS中集成Medium Editor的示例分析

這篇文章將為大家詳細講解有關VueJS中集成Medium Editor的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

0x00 前言

VueJS 社區里面關于富文本編輯器的集成也不少了，但是之前小調研了一下，基本上就是 quill,medium-editor，因為之前用 AngularJS 用過 medium-editor，并且需要自定義某些按鈕，而且最好還是選中彈出式的，所以就決定用 medium-editor。

社區里面 star 較多的就是這個了：vue-medium-editor，但是打開它官網，看了看文檔，越看越別扭，來看看它用法：

<!-- index.html -->
<medium-editor :text='myText' :options='options' custom-tag='h3' 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'
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'])
}

簡單來說就是給選中的文字加一些 class (上面是 fs-xx 之類的)，其中需要引一個鼠標選中的庫 rangy，挺煩人的也是，然后在 text-editor 中這樣用：

先實例化

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
}

再放到 editor 上

this.editor = new MediumEditor(this.$el, Object.assign({}, editorOptions, this.options))

當然上面實例化的步驟不一定要寫到這個組件里面，配置 options 也可以從組件外傳入

0x04 細節和坑

1、這里用到了 v-model 的自定義實現，詳見官方文檔：v-model

簡單來說呢就是 props: value ，和 this.$emit('input', model) 就可以實現在組件中模擬 v-model 啦

2、多個 editor 使用的自定義button 實例的問題。由于我自己應用的時候有兩個挨著的 <text-editor>，用的上面的代碼會導致兩個 editor 實例用的是同一個 button 實例，這會導致一個很嚴重的問題：即編輯下面編輯器的內容，可能會修改的上面的編輯器！！

要解決這個也很簡單，修改這一行：

this.editor = new MediumEditor(this.$el, Object.assign({}, _.cloneDeep(editorOptions), this.options))

將自定義的 options 深復制一下，這里借助了 lodash 的函數。

關于“VueJS中集成Medium Editor的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。