【vue】vue富文本编辑器（可重复使用组件）vue-quill-editor

前言

在vue项目中经常会遇到需要编辑和展示一些比较复杂的新闻内容，这时候就会用到富文本编辑器，接下来咱们一起来看一下如何在vue中使用富文本组件vue-quill-editor

1、安装editor组件

在终端运行命令cnpm install vue-quill-editor

cnpm install vue-quill-editor

安装成功后结果如下

2、引用vue-quill-editor

在main.js中写入如下代码

//引用vue-quill-editor组件和样式
import  VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

main.js完整代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//引如axios组件
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

//引用vue-quill-editor组件和样式
import  VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)



import store from './store/store'   //导入store

Vue.config.productionTip = false
Vue.http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,   //在new Vue中使用
  components: { App },
  template: '<App/>'
})

3、创建vue editor组件（可复用组件）

在文件夹components中新建文件VueEditor.vue，完整代码如下

注意：在此组件中定义了props(属性):content，然后通过v-model进行了数据的绑定（由于需要从父组件把富文本的值传递过来，所以通过props进行了属性的定义，但是在绑定时候会有问题，请继续看最后会有解决此问题的解决方案）

<template>
  <quill-editor
    class="editor"
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
  >
  </quill-editor>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
export default {
  props: ["content"],
  data() {
    return {
      editorOption: {},
      
    };
  },
  computed: {
    editor() {
      console.log(this.$refs.myTextEditor.quillEditor);
      return this.$refs.myTextEditor.quillEditor;
    },
  },
  methods: {
    onEditorBlur() {},
    onEditorFocus(e) {
      //编辑器获得焦点的事件
      console.log(e);
    },
    onEditorChange(e) {
      //内容改变事件
      console.log(e);
    },
  },
};
</script>

<style>
</style>

4、在页面中使用vue editor组件

<Editor v-bind:content="parentContent"></Editor>

在新闻编辑页面中使用该组件，完整代码如下

注意：在此页面中通过v-bind:data 进行了数据的动态绑定

<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="Id">
      <el-input v-model="form.id"></el-input>
    </el-form-item>
    <el-form-item label="Title">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="Content">
      <Editor v-bind:content="parentContent"></Editor>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button type="primary" @click="onCancel">Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Editor from "@/components/VueEditor";
export default {
  components: {
    Editor,
  },
  data() {
    return {
      form: this.$store.state.newsitem,
      parentContent:this.$store.state.newsitem.content
    };
  },
  methods: {
    onSubmit() {
      let form = this.form;
      console.log(form);
      const restweburl = "http://localhost:5000/";
      const requestOptions = JSON.stringify({
        id: 1,
        title: "新闻标题1111112222",
        publishDate: "2020-10-10",
        pageUrl: "新闻页面url地址",
        content: null,
        author: null,
      });

      this.$axios
        .post(restweburl + "api/Article/UpdateNews", requestOptions)
        .then(function (res) {
          console.log(res);
        })
        .catch(function (err) {
          console.log(err);
        });
      console.log("submit!");
    },
    onCancel() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style>
</style>

5、运行效果

运行命令npm run dev，在浏览器中查看最终效果，如下，太好了，可以看到富文本编辑器以及默认绑定的数据

6、编辑时候出错以及解决方案（双向绑定问题）

但是在编辑富文本内容时候，发现有问题，如下

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "content"

解决方案可以参考

【vue】父组件传递数据给子组件报错：Avoid mutating a prop directly since the value will be overwritten whenever the