vue富文本编辑器组件vue-quill-edit使用教程_Vue富文本编辑器资源-CSDN文库

5星 · 超过95%的资源 27 浏览量 2020-12-12 22:57:19 上传评论收藏 28KB PDF 举报

资源推荐

资源详情

资源评论

vue富文本编辑器组件富文本编辑器组件vue-quill-edit使用教程使用教程

之前使用的富文本编辑器是uEditor,kindEditor，感觉不太方便。

近期项目vue单页面，就使用vue-quill-edit这个编辑器组件吧！

一、安装一、安装 cnpm install vue-quill-editor

二、引入二、引入

在main.js引入并注册：

import VueQuillEditor from 'vue-quill-editor'

// require styles 引入样式

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

三、封装组件三、封装组件

<template>

<div class="quill_box">

<quill-editor

v-model="content"

ref="myQuillEditor"

:options="editorOption"

@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

@change="onEditorChange($event)">

</quill-editor>

</div>

</template>

<script>

import Bus from "../../assets/utils/eventBus";

export default {

data() {

return {

content:'',

editorOption: {

placeholder: "请编辑内容",

modules: {

toolbar: [

["bold", "italic", "underline", "strike"],

["blockquote", "code-block"],

[{ list: "ordered" }, { list: "bullet" }],

[{ script: "sub" }, { script: "super" }],

[{ indent: "-1" }, { indent: "+1" }],

[{ size: ["small", false, "large", "huge"] }],

[{ font: [] }],

[{ color: [] }, { background: [] }],

[{ align: [] }],

[ "image"] ] }

}

};

},

props:[

'contentDefault'

],

watch:{

contentDefault:function(){

this.content = this.contentDefault;

}

},

mounted:function(){

this.content = this.contentDefault;

},

methods: {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

davlid

2022-04-21

没用del了吧
地图帝

2023-06-17

这个编辑器组件非常好用，简单易懂。
不美的阿美

2023-06-17

vue-quill-edit的API文档很清晰，让我很容易地使用起来。
郑瑜伊

2023-06-17

使用vue-quill-edit只需要少量代码就可以实现复杂富文本编辑，大大减少了编码难度。
熊比哒

2023-06-17

vue-quill-edit支持多种格式的文字和图片，非常实用。

前往

页

weixin_38530846

粉丝: 5
资源: 930

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip