Vue使用富文本编辑器使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服含图片自定义上传服
务、清除复制粘贴样式等务、清除复制粘贴样式等)
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关
知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可
以参考下
使用教程(注意细看总结部分，写了几点，希望有所帮助)：
1、安装插件：npm install vue-quill-editor
2、安装插件依赖：npm install quill
3、main.js文件中引入：
import Vue from 'vue'
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)
new Vue({
VueQuillEditor,
render: h => h(App),
}).$mount('#app')
4、vue页面中使用(代码完整，复制就能使用)：
<template>
<div id="quillEditorId">
<el-upload
class="avatarUploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<quill-editor
id="myQuillEditorId"
ref="myQuillEditor"
v-model="ruleForm.editeContent"
:options="editorOption"
@change="handelEditorChange($event)"
>
</quill-editor>
</div>
</template>
<script>
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
['blockquote', 'code-block'], //引用、代码块儿
[{ header: 1 }, { header: 2 }], //标题，键值对的形式；1、2表示字体大小
[{ list: 'ordered' }, { list: 'bullet' }], //列表
[{ script: 'sub' }, { script: 'super' }], //上下标
[{ indent: '-1' }, { indent: '+1' }], //缩进
[{ direction: 'rtl' }], //文本方向
[{ size: ['small', false, 'large', 'huge'] }], //字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
[{ color: [] }, { background: [] }], //字体颜色，字体背景颜色
[{ font: [] }], //字体
[{ align: [] }], //对齐方式
['clean'], //清除字体样式
['image'], //上传图片、上传视频(video)、超链接(link)
]
export default {
data() {
return {
imageUrl: '',
editeContent: '',
editorOption: {
modules: {
clipboard: {
// 粘贴版，处理粘贴时候的自带样式
matchers: [[Node.ELEMENT_NODE, this.HandleCustomMatcher]],
评论0