Vue 轻量级富文本编辑器-Vue-Quill-Editor-vue富文本编辑器插件

1.下载Vue-Quill-Editor

npm install vue-quill-editor --save

2.下载quill(Vue-Quill-Editor需要依赖)

npm install quill --save

3.代码

<template>
  <div class="about">
    <div class="editor_container">
      <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
      >
      </quill-editor>
      <input type="text" v-model="texts"/>
      <button type="button" @click="onclickForm">提交</button>
    </div>
  </div>
</template>
<script>
import {quillEditor} from "vue-quill-editor" //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'about',
  components: {quillEditor},
  data() {
    return {
      content: '',
      texts: '',
      // 编辑器配置
      editorOption: {
        placeholder: '在这里输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //  加粗、倾斜、下划线、删除线
            ['blockquote', 'code-block'],// 引用代码块
            [{'header': 1}, {'header': 2}], // 标题，键值对应的形式，1，2 表示字体大小
            [{'list': 'ordered'}, {'list': 'bullet'}], // 列表
            [{'script': 'sub'}, {'script': 'super'}], // 上下标
            [{'indent': -1}, {'indent': +1}], // 缩进
            [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}], // 几级标题
            [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
            [{'font': []}], // 字体
            [{'align': []}], // 对齐方式
            ['clean'], //清除
            ['image', 'video'], // 上传图片、上传视频
          ]
        }
      }
    }
  },
  mounted() {
    let content = ''; // 请求返回值
    this.str = this.escapeStringHTML(content)
  },
  methods: {
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/</g, '<');
      str = str.replace(/>/g, '>');
      return str
    },
    onclickForm() {
      console.log(this.content)
      this.content = ''
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>
<style scoped>
.editor_container /deep/ .ql-editor {
  min-height: 300px;
}
</style>

4.自定义 toolbar 菜单

// 编辑器配置
      editorOption: {
        placeholder: '在这里输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //  加粗、倾斜、下划线、删除线
            ['blockquote', 'code-block'],// 引用代码块
            [{'header': 1}, {'header': 2}], // 标题，键值对应的形式，1，2 表示字体大小
            [{'list': 'ordered'}, {'list': 'bullet'}], // 列表
            [{'script': 'sub'}, {'script': 'super'}], // 上下标
            [{'indent': -1}, {'indent': +1}], // 缩进
            [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}], // 几级标题
            [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
            [{'font': []}], // 字体
            [{'align': []}], // 对齐方式
            ['clean'], //清除
            ['image', 'video'], // 上传图片、上传视频
          ]
        }
      }

5.存储及将数据库中的数据反显为HTML字符串

后台接收到数据后会将字符中的标签进行转码，所以我们要先进行一个解码的操作让他变成标签形式的字符串：

例如后台接收的数据如下：""<h1>title</h1>" ，对应解码后就是`<h1>title</h1>`。

// 把实体格式字符串转义成HTML格式的字符串
// 转码
    escapeStringHTML(str) {
      str = str.replace(/</g, '<');
      str = str.replace(/>/g, '>');
      return str
    },

然后将返回值赋值给对应的参数：

<div v-html='str' class='ql-editor'>{{str}}</div>

上面的str就是转码函数返回的值，我们要先在data中定义，所以我现在将新增跟展示放在一起，代码如下：

<template>
  <div class="about">
    <div class="editor_container">
      <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
      >
      </quill-editor>
      <input type="text" v-model="texts"/>
      <button type="button" @click="onclickForm">提交</button>
    </div>
  </div>
</template>
<script>
import {quillEditor} from "vue-quill-editor" //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'about',
  components: {quillEditor},
  data() {
    return {
      content: '',
      texts: '',
      // 编辑器配置
      editorOption: {
        placeholder: '在这里输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //  加粗、倾斜、下划线、删除线
            ['blockquote', 'code-block'],// 引用代码块
            [{'header': 1}, {'header': 2}], // 标题，键值对应的形式，1，2 表示字体大小
            [{'list': 'ordered'}, {'list': 'bullet'}], // 列表
            [{'script': 'sub'}, {'script': 'super'}], // 上下标
            [{'indent': -1}, {'indent': +1}], // 缩进
            [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}], // 几级标题
            [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
            [{'font': []}], // 字体
            [{'align': []}], // 对齐方式
            ['clean'], //清除
            ['image', 'video'], // 上传图片、上传视频
          ]
        }
      }
    }
  },
  mounted() {
    let content = ''; // 请求返回值
    this.str = this.escapeStringHTML(content)
  },
  methods: {
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/</g, '<');
      str = str.replace(/>/g, '>');
      return str
    },
    onclickForm() {
      console.log(this.content)
      this.content = ''
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>
<style scoped>
.editor_container /deep/ .ql-editor {
  min-height: 300px;
}
</style>