在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打开组件自动聚焦的情况。