Vue2.0 实现富文本编辑器功能

介绍

在Vue2.0中要实现富文本编辑器功能，可以选择使用第三方富文本编辑器插件，或者自己编写实现。本文将介绍一种使用Vue2.0自定义组件实现富文本编辑器的方法。

准备工作

在开始之前，需要保证已经安装了Vue2.0和相关的vue-loader、vue-template-compiler的依赖。可以通过npm安装：

npm install vue vue-loader vue-template-compiler --save-dev

编写Vue2.0自定义组件

<template>
  <div :class="{ 'editor': true, 'rich-content': true }">
    <div class="toolbar">
      <template v-for="(icon, index) in icons">
        <div :key="index" class="tool-item" @click.prevent="onToolItemClick(icon)">
          <i :class="icon"></i>
        </div>
      </template>
    </div>
    <div class="editor-content" :contenteditable="editable" @input="onEditorInput"></div>
  </div>
</template>

<script>
export default {
  name: 'RichEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      content: ''
    }
  },
  computed: {
    icons() {
      return [
        'iconfont icon-bold',
        'iconfont icon-italic',
        'iconfont icon-underline',
        'iconfont icon-strikethrough',
        'iconfont icon-link',
        'iconfont icon-image',
        'iconfont icon-quote',
        'iconfont icon-code',
        'iconfont icon-html'
      ]
    }
  },
  methods: {
    onToolItemClick (icon) {
      switch(icon) {
        case 'iconfont icon-bold':
          document.execCommand('bold', false, null)
          break;
        case 'iconfont icon-italic':
          document.execCommand('italic', false, null)
          break;
        case 'iconfont icon-underline':
          document.execCommand('underline', false, null)
          break;
        case 'iconfont icon-strikethrough':
          document.execCommand('strikethrough', false, null)
          break;
        case 'iconfont icon-link':
          var linkUrl = prompt('请输入链接网址：','');
          if (linkUrl != null) 
            document.execCommand('createLink', false, linkUrl);
          break;
        case 'iconfont icon-image':
            var imgUrl = prompt('请输入图片网址：','');
            if (imgUrl != null)
              document.execCommand('insertImage', false, imgUrl);
            break;
        case 'iconfont icon-quote':
            document.execCommand('formatBlock', false, '<blockquote>');
            break;
        case 'iconfont icon-code':
          document.execCommand('formatBlock', false, '<pre>');
          break;
        case 'iconfont icon-html':
          break;
      }
      this.$emit('input', this.content)
    },
    onEditorInput () {
      this.content = this.$el.querySelector('.editor-content').innerHTML
      this.$emit('input', this.content)
    }
  },
  created () {
    this.content = this.value
  }
}
</script>

代码中，我们创建了一个Vue组件，名为RichEditor。编辑器界面包括工具栏和内容区域。工具栏中包含多个图标，分别对应加粗、斜体、下划线、删除线、超链接、插入图片、引用和代码等操作。当用户选择某项操作时，我们通过document.execCommand命令对编辑器内容进行编辑，并存储编辑内容到组件实例的content属性中。同时，我们通过Vue的双向数据绑定机制，将组件内部的content数据与父组件传递的value数据保持一致。用户在编辑器中输入内容时，我们通过@input事件监听，并将输入内容自动绑定到父组件的value中。

在父组件中使用

<template>
  <div>
    <rich-editor v-model="content"></rich-editor>
    <div class="preview" v-html="content"></div>
  </div>
</template>

<script>
import RichEditor from './RichEditor.vue'

export default {
  name: 'App',
  components: {
    RichEditor
  },
  data () {
    return {
      content: ''
    }
  }
}
</script>

在父组件中，我们引用了RichEditor组件，并通过v-model指令将content绑定到RichEditor组件的value属性中。我们可以在父组件中使用content属性绑定RichEditor中输入的内容。上述代码中，我们在RichEditor下方通过v-html指令将RichEditor中的content渲染到页面中。

示例

示例一

以下是一个使用上述自定义组件RichEditor实现的简单富文本编辑器示例：

<template>
  <div class="editor-wrapper">
    <rich-editor v-model="content"></rich-editor>
    <div class="preview" v-html="content"></div>
  </div>
</template>

<script>
import RichEditor from './RichEditor.vue'

export default {
  name: 'Demo',
  components: {
    RichEditor
  },
  data () {
    return {
      content: ''
    }
  }
}
</script>

<style scoped>
.editor-wrapper {
  display: flex;
}

.editor {
  border: 1px solid #ccc;
  width: 50%;
  margin-right: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.preview {
  width: 50%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}
</style>

示例二

以下是一个使用了第三方富文本编辑器插件Quill实现的富文本编辑器示例：

<template>
  <div class="editor-wrapper">
    <quill-editor v-model="content"></quill-editor>
    <div class="preview" v-html="content"></div>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'Demo',
  components: { quillEditor },
  data () {
    return {
      content: ''
    }
  },
  mounted() {
    this.$refs.quillEditor.editor.disable() // 禁用富文本编辑器
  }
}
</script>

<style scoped>
.editor-wrapper {
  display: flex;
}

.editor {
  border: 1px solid #ccc;
  width: 50%;
  margin-right: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.preview {
  width: 50%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}
</style>

该示例中使用到了第三方富文本编辑器插件vue-quill-editor。其使用方法与自定义组件类似，不过在进行必要的样式调整和一些特殊功能实现时会更加方便。在这里我们调用了插件提供的quillEditor组件，并通过v-model指令双向绑定组件的value属性。注意，由于该插件没有提供禁用富文本编辑器的API，示例中我们通过通过访问quillEditor组件的editor属性来进行手动禁用。