在vueCli中使用富文本编辑器:vue-quill-editor

在vueCli中使用富文本编辑器:vue-quill-editor

由于最近在项目中需要用到富文本编辑器,在博客上找了好多,都没成功,只有vue-quill-editor成功了,只是简单的引入使用,并没有使用太复杂的功能逻辑。至于其他的比如wangeditor,还有待研究。

使用步骤:

1、先在项目里进行安装

npm install vue-quill-editor 

2、在需要的组件里引用富文本编辑器及其样式

import { quillEditor } from 'vue-quill-editor'   // 富文本编辑器

import 'quill/dist/quill.core.css'   // 富文本编辑器的样式
import 'quill/dist/quill.snow.css'   // 富文本编辑器的样式
import 'quill/dist/quill.bubble.css'   // 富文本编辑器的样式

3、当作子组件注册在所需组件中

components: {
    quillEditor
  }

4、在视图中使用富文本编辑器

<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />

5、所需配置

data () {
	return {
		content: '',     // 动态绑定文本框中的内容
		editorOption: {}     //  上传图片参数
	}
},

6、获取文本框中的内容并且使用v-html展示编辑后带CSS样式的文本

1)由于在data中已经进行双向绑定了,所以可以直接在视图中获取绑定
<div class="ql-container ql-snow">
	<div class="ql-editor" v-html="content"></div>
</div>
2) 由于在富文本框上绑定了ref,也可以用$refs获取(仅获取html,有(1)就够了)
let val = this.$refs.text.value;
console.log(val);  //  val即文本框内容
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值