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

作者:神秘网友 发布时间:2020-10-27 18:12:43

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

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

前言

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

1、安装editor组件

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

cnpm install vue-quill-editor

安装成功后结果如下

【vue】vue富文本编辑器(可重复使用组件)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,在浏览器中查看最终效果,如下,太好了,可以看到富文本编辑器以及默认绑定的数据

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

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

 

 

 

 

 

 

【vue】vue富文本编辑器(可重复使用组件)vue-quill-editor相关教程

  1. D3.js树图tree 组织机构分布图(基于vue)

    D3.js树图tree 组织机构分布图(基于vue) @[TOC](D3.js树图tree 组织机构分布图(基于vue)) 背景 前段时间接到一个需求,仿照企业查查-企业族谱 使用d3画出企业关系树图。这也是本人第一次接触d3.js,总体来说就是对 数据 进行操作,具体可自行网上学习,还需要

  2. vue遍历map对象

    vue遍历map对象 数据结构如下图: 遍历方法:两次v-for view v-for=(item,key) in rechargeTicketRule :key=key class=uni-dialog-content clearfix view class=box v-for=data in item /view/view 页面展示效果

  3. 在Vue Vite应用程序中实现暗/亮模式

    在Vue Vite应用程序中实现暗/亮模式 在本文中,我将在不使用任何库的情况下将dark\Light模式功能实现到我们的Vue Vite应用程序中。 我们将首先创建一个简单的Vite应用程序,然后为我们的应用程序设置一个简单的用户界面。在创建我们的Vue应用程序之前,我想提

  4. abap——CREATE_TEXT创建采购申请的抬头文本

    abap——CREATE_TEXT创建采购申请的抬头文本 例如创建采购申请抬头文本 采购申请 ME52N 双击抬头注释 菜单栏的转到——表头 程序 * 创建抬头文本 DATA: ls_fid LIKE thead-tdid, ls_fname LIKE thead-tdname, ls_fobject LIKE thead-tdobject, ls_text TYPE s

  5. vue 3.0 + ant-design-vue 2.0(测试版)搭建项目

    vue 3.0 + ant-design-vue 2.0(测试版)搭建项目 最近项目需要,使用vue.3.0 使用 vue-cli 4.5.4 以及 antd 2.0 搭建一个项目,antd 2.0 目前处于测试版,我把过程总结一下。 antd 2.0 的地址 :https://2x.antdv.com/components/radio-cn/ vue3.0 的地址: ht

  6. VUE路由-路由跳转

    VUE路由-路由跳转 在进行具体的路由跳转之前我们要先做些基础准备 template lang =html div class=learnvue 学习路由使用 /div/templatescript export default{ }/scriptstyle lang=css/style 第一步:引用刚才建的页面 import LearnVue from “@/components/

  7. vue组件传参的方式总结整理

    vue组件传参的方式总结整理 组件通信常用方式 基础方面必回的有: 父子组件传参- props(父传子)- $emit(event)(子传父)其他组件传参- vuex- eventBus(事件总线:事件监听事件发布机制) 补充:其它 - $parent- $refs/$children- provide/ inject- 能够实现

  8. 浅谈Vue.js中双向绑定的原理及实现方法

    Vue最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript对象。而当你修改它们时,视图会进行更新。vue通过双向绑定实现,本文就来为大家介绍一下vue双向绑定原理及实现方法。 本文主要介绍两大内容: 1. vue数据双向绑定的原理。 2