Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

Vue使用富文本编辑器Vue-Quill-Editor的攻略如下：

1. 安装Vue-Quill-Editor

我们需要通过npm进行安装：

npm install vue-quill-editor --save

安装完成后我们直接使用即可。

2. 在Vue项目中使用Vue-Quill-Editor

在项目的main.js文件中引入Vue-Quill-Editor：

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

使用Vue-Quill-Editor：

<template>
  <div>
    <quill-editor v-model="content"></quill-editor>
  </div>
</template>

3. 添加图片自定义上传服务

默认情况下我们需要手动将图片上传到服务端，才能在富文本中使用图片。而通过Vue-Quill-Editor的事件监听，我们可以方便地实现图片自定义上传服务。

在组件的methods中添加图片自定义上传服务：

onImageUpload (file) {
    var self = this;
    return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('file', file);
        axios.post('/api/upload', formData).then((response) => {
            const imageUrl = response.data.url;
            self.$refs.editor.quill.insertEmbed(self.quillEditor.getSelection().index, 'image', imageUrl);
            resolve();
        }).catch(error => {
            reject(error);
        });
    });
}

4. 清除复制粘贴样式

在富文本编辑器中，用户复制粘贴的内容可能会保留原有的样式，这样对于整个页面的样式会造成干扰。我们可以通过Quill的cleanContents方法对内容进行清洗。

在组件的methods中添加清除复制粘贴样式的方法：

cleanPaste (delta) {
    const pastedImages = delta.filter(op => op.insert.hasOwnProperty('image'));
    delta.ops = delta.ops.filter(op => typeof op.insert !== 'string');
    delta = new Delta(delta.ops);
    const plain = delta.reduce((text, op) => text + op.insert, '');
    const temp = document.createElement('div');
    temp.innerHTML = plain;
    [...temp.querySelectorAll('*')].forEach(node => {
        if (!node.hasChildNodes()) {
            return
        }
        node.childNodes.forEach(child => {
            if (child.nodeType === 3) {
                node.parentNode.insertBefore(child, node);
            }
        })
        node.parentNode.removeChild(node);
    });
    delta.ops = this.$refs.editor.quill.clipboard.convert(temp.innerText);
    this.$refs.editor.quill.updateContents(delta);
    if (pastedImages.length) {
        this.$refs.editor.quill.fireEvent('image-upload', pastedImages);
    }
}

示例1

假设我们需要在一个具有富文本编辑器的表单中添加数据，并在提交后将数据存入数据库。表单代码如下：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="title">
      <quill-editor ref="editor" 
                    v-model="content" 
                    :options="quillOptions" 
                    @image-upload="onImageUpload($event)">
      </quill-editor>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      title: '',
      content: '',
      quillOptions: {
        options: {
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline'],
              ['image', 'code-block']
            ]
          }
        }
      }
    }
  },
  methods: {
    handleSubmit () {
      const postData = {
        title: this.title,
        content: this.content
      }
      axios.post('/api/post', postData).then((response) => {
        console.log(response);
      }).catch((error) => {
        console.log(error);
      })
    },
    onImageUpload (file) {
      var self = this;
      return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('file', file);
        axios.post('/api/upload', formData).then((response) => {
          const imageUrl = response.data.url;
          self.$refs.editor.quill.insertEmbed(self.quillEditor.getSelection().index, 'image', imageUrl);
          resolve();
        }).catch(error => {
          reject(error);
        });
      });
    }
  }
}
</script>

示例2

假设我们需要在一个已有的富文本编辑器中修改内容。代码如下：

<template>
  <div>
    <button @click="editContent">编辑内容</button>
    <quill-editor ref="editor" 
                  v-model="content" 
                  :options="quillOptions" 
                  :readonly="readonly">
    </quill-editor>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      content: '',
      quillOptions: {
        modules: {
          toolbar: false
        },
        readOnly: true
      },
      readonly: true
    }
  },
  methods: {
    editContent () {
      this.readonly = false;
      this.quillOptions.modules.toolbar = [
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
      ];
    }
  }
}
</script>

以上就是使用Vue-Quill-Editor进行富文本编辑器开发的攻略。