在Vue項目中使用wangEditor

wangEditor官網

封裝的Editor組件

<template>
  <div class="editor-wrap">
    <div ref="toolbar" class="toolbar"/>
    <div ref="editor" class="editor-com" style="text-align:left">
      <input
        ref="placeHolder"
        :style="{border: 'none', background: '#fff', outline: 'none', width: '100%', color: '#ccc', margin: '10px 0 4px 4px'}"
        :placeholder="defaultText"
        class="default-text"
        type="text">
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'Editor',
  props: {
    editorContent: {
      type: String,
      default: '',
      update: true
    },
    // 菜單屬性
    menus: {
      type: Array,
      default: function() {
        return [
          'head', // 標題
          'bold', // 粗體
          'fontSize', // 字號
          'fontName', // 字體
          'italic', // 斜體
          'underline', // 下划線
          'strikeThrough', // 刪除線
          'foreColor', // 文字顏色
          'backColor', // 背景顏色
          'link', // 插入鏈接
          'list', // 列表
          'justify', // 對齊方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入圖片
          'table', // 表格
          'video', // 插入視頻
          'code', // 插入代碼
          'undo', // 撤銷
          'redo' // 重復
        ]
      },
      update: true
    },
    // 默認展示文字
    defaultText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      // 第一次加載默認加載初始文字
      startEditor: true
    }
  },
  computed: {},
  watch: {
    editorContent(newval, oldVal) {
      if (!this.change) {
        this.editor.txt.html(newval)
      }
      this.change = false
    }
  },
  mounted() {
    this.editor = new E(this.$refs.toolbar, this.$refs.editor)
    this.editor.customConfig.menus = this.menus
    this.editor.customConfig.placeholder = this.defaultText
    this.editor.customConfig.onfocus = () => {
      this.$refs.placeHolder.style.display = 'none'
    }

    this.editor.customConfig.onchange = () => {
      this.change = true
      const html = this.editor.txt.html()
      const text = this.editor.txt.text()
      const obj = {
        html,
        text
      }
      // 向上觸發editor變化
      this.$emit('change', obj)
    }
    // 創建editor
    this.editor.create()
    if (this.editorContent.length) {
      this.$refs.placeHolder.style.display = 'none'
      this.editor.txt.html(this.editorContent)
    }
  },
  methods: {}
}
</script>

源碼修改（用於取消聚焦功能）

// filename ===> wangEditor.js 

// 初始化選區，將光標定位到內容尾部
    initSelection: function initSelection(newLine) {
        var $textElem = this.$textElem;
        var $children = $textElem.children();
        if (!$children.length) {
            // 如果編輯器區域無內容，添加一個空行，重新設置選區
            $textElem.append($('<p><br></p>'));
            this.initSelection();
            return;
        }

        var $last = $children.last();

        if (newLine) {
            // 新增一個空行
            var html = $last.html().toLowerCase();
            var nodeName = $last.getNodeName();
            if (html !== '<br>' && html !== '<br\/>' || nodeName !== 'P') {
                // 最后一個元素不是 <p><br></p>，添加一個空行，重新設置選區
                $textElem.append($('<p><br></p>'));
                this.initSelection();
                return;
            }
        }

        // this.selection.createRangeByElem($last, false, true);
        // this.selection.restoreSelection();
    },

// wangEditor.min.js 中刪除下面這行（用於打包時）
 this.selection.restoreSelection()

上面注釋掉這兩行后會發現wangEditor第一次輸入內容會出現光標總是出現在某個位置比如文本開頭，這是因為我們在Editor組件中`watch`  的方法對於將父組件的處理后的值回顯的問題,如下

// 這是上面那種，只有editor觸發的文本改變才能回顯，這樣就不可以將修改過的文本回顯到editor中
// 比如過濾重復后的文本
watch: {
    editorContent(newval, oldVal) {
      if (!this.change) {
        this.editor.txt.html(newval)
      }
      this.change = false
    }
  }

// 下面這種方法可以將修改過的回顯不過如果需要取消自動聚焦的話，會出現一個bug，光標會出現在開頭
// 這是因為文本被重新寫了，但是我們注釋了光標自動聚焦到末尾
// --- 可以通過組件初始化成功的時候聚焦到一個隱藏的button上
  watch: {
    editorContent(newval, oldVal) {
      const html = this.editor.txt.html()
      if (!oldVal || (html !== newval)) {
        this.editor.txt.html(newval)
      }
    }
  }

以上組件演示了在vue中使用 `wangEditor` 的時候添加 `placeholder` 的效果和如何取消wangEditor打開組件自動聚焦的情況。