【vue】vue富文本编辑器（可重复使用组件）vue-quill-editor
【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安装成功后结果如下
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
【vue】vue富文本编辑器（可重复使用组件）vue-quill-editor相关教程
-
D3.js树图tree 组织机构分布图(基于vue)
D3.js树图tree 组织机构分布图(基于vue) @[TOC](D3.js树图tree 组织机构分布图(基于vue)) 背景 前段时间接到一个需求，仿照企业查查-企业族谱 使用d3画出企业关系树图。这也是本人第一次接触d3.js，总体来说就是对 数据 进行操作，具体可自行网上学习，还需要
-
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 页面展示效果
-
在Vue Vite应用程序中实现暗/亮模式
在Vue Vite应用程序中实现暗/亮模式 在本文中，我将在不使用任何库的情况下将dark\Light模式功能实现到我们的Vue Vite应用程序中。 我们将首先创建一个简单的Vite应用程序，然后为我们的应用程序设置一个简单的用户界面。在创建我们的Vue应用程序之前，我想提
-
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
-
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
-
VUE路由-路由跳转
VUE路由-路由跳转 在进行具体的路由跳转之前我们要先做些基础准备 template lang =html div class=learnvue 学习路由使用 /div/templatescript export default{ }/scriptstyle lang=css/style 第一步：引用刚才建的页面 import LearnVue from “@/components/
-
vue组件传参的方式总结整理
vue组件传参的方式总结整理 组件通信常用方式 基础方面必回的有： 父子组件传参- props(父传子)- $emit(event)（子传父）其他组件传参- vuex- eventBus（事件总线：事件监听事件发布机制） 补充：其它 - $parent- $refs/$children- provide/ inject- 能够实现
-
浅谈Vue.js中双向绑定的原理及实现方法
Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript对象。而当你修改它们时，视图会进行更新。vue通过双向绑定实现，本文就来为大家介绍一下vue双向绑定原理及实现方法。 本文主要介绍两大内容： 1. vue数据双向绑定的原理。 2