Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)_quill禁止图片粘贴

tor

1星 28 浏览量更新于2023-05-04 评论收藏 58KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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页面中使用(代码完整，复制就能使用)：

<el-upload

class="avatarUploader"

action="https://jsonplaceholder.typicode.com/posts/"

:show-file-list="false"

:on-success="handleAvatarSuccess"

:before-upload="beforeAvatarUpload"

</el-upload>

<quill-editor

id="myQuillEditorId"

ref="myQuillEditor"

v-model="ruleForm.editeContent"

:options="editorOption"

@change="handelEditorChange($event)"

</quill-editor>

</div>

</template>

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]],

toolbar: {

container: toolbarOptions, // 工具栏

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

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

ARSC001

2021-09-26

网上都有的内容

weixin_38645208

粉丝: 6
资源: 929

会员权益专享

Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

评论1

会员权益专享

最新资源

Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

评论1

Vue项目中quill-editor带样式编辑器的使用方法

Quill编辑器插入自定义HTML记录的示例详解

vue-quill-editor 自定义工具栏和自定义图片上传路径操作

vue使用富文本编辑器vue-quill-editor 怎么调整图片大小

vue3富文本编辑器vue-quill-editor预览

vue3+ts 富文本编辑器插件vue-quill-editor使用代码

vue-quill-editor富文本编辑器

vue-quill-editor富文本编辑器使用步骤

vue3使用富文本编辑器vue-quill

vue项目使用Quill 富文本编辑器 <quill-editor>

vue2项目vue-quill-editor使用

vue中怎么使用vue-quill-editor

vue2.0使用vue-quill-editor

vue-quill-editor富文本编辑器结合ant上传图片

Element UI vue-quill-editor 富文本编辑器插入图片自定义

vue中vue-quill-editor对应quill什么版本

vue 使用富文本编译器之vue-quill-editor中一个组件使用两个quill-editor导致上传图片都是在第一个里面

vue-quill-editor自定义上传图片

vue-quill-editor文档

vue-quill-editor富文本编辑器-扩展表格

会员权益专享

最新资源