vue-element安装富文本编辑器vue-quill-editor教程

最新推荐文章于 2024-04-04 09:02:01 发布

季夏梧桐

最新推荐文章于 2024-04-04 09:02:01 发布

阅读量648

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yu502586512/article/details/135114775

版权

在vue ui面板中安装vue-quill-editor依赖

命令安装

npm install vue-quill-editor --save

# or

yarn add vue-quill-editor

使用方法

在main.js导入富文本编辑器

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

将富文本编辑器注册为全局可用

Vue.use(VueQuillEditor)

页面中使用

<quill-editor v-model="addForm.art_content"></quill-editor>

最终效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

季夏梧桐

关注关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-element安装富文本编辑器vue-quill-editor教程

在vue ui面板中安装vue-quill-editor依赖。在main.js导入富文本编辑器。将富文本编辑器注册为全局可用。
复制链接

扫一扫

Element编辑器

10-11

Element编辑完美等游戏，内有使用说明

河豚随心记（六）vue+element ui 使用富文本编辑器组件vue-ueditor-wrap集成秀米编辑器（ueditor内核）

最新发布

m0_46412695的博客

05-12

2345

这里的link就是图片上传完成后富文本编辑器上回显的图片url，所以这个url一定要是前端可以访问的，一般是网络地址，我的config.imgURL是图片存放地址的前缀，res.url是图片的名称，所以我这里做了字符串拼接，你们可以根据自己的实际情况修改。秀米编辑器的要求的富文本编辑器内核得是ueditor的，不过用quill内核的也可以，quill的大家可以自行百度，我这里用的是ueditor内核来做的。接下来要讲的是怎么对从秀米编辑器那边粘贴到ueditor富文本编辑器里的图片进行本地化。

参与评论您还未登录，请先登录后发表或查看评论

elementui 集成富文本编辑器vue-quill-editor

zhouzhiwengang的专栏

02-15

1532

第一步:安装vue-quill-editor cnpm install vue-quill-editor -S 第二步：VUE项目集成vue-quill-editor main.js 文件添加如下代码片段： import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubb

vue+elementui使用富文本编辑器vue-quill-editor

好气嗷，但仍要保持微笑!

12-01

407

1）安装插件 npm install vue-quill-editor –-save 2）引入插件 import quillEditor from 'vue-quill-editor' //引入css样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' 3)声明组件 components:{quillEditor} 4)使用组件 ...

【第001篇】vue+element-ui中集成富文本编辑器(vue-quill-editor)

嘉&年华的博客

08-24

7590

一、在项目中下载安装富文本编辑器 npm install vue-quill-editor --save 二、在项目中引入(我这里是在main.js中全局引用了) // 引入富文本组件 import QuillEditor from 'vue-quill-editor' // 引入富文本组件样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'

element ui富文本编辑器的使用(quill-editor)

Lyq2017901206的博客

02-29

3470

【代码】element ui富文本编辑器的使用(quill-editor)

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

10-16

在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...

vue3.0 vue-quill-editor.rar

09-19

Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...

vue结合element-ui和quill富文本编辑器实现上传视频和封面

12-03

总的来说，Vue、Element-UI和Quill的组合提供了一个强大而灵活的富文本编辑器，可以轻松地实现视频和封面上传功能。通过自定义模块，我们可以扩展编辑器的功能，满足特定项目的需求。同时，确保前后端交互的安全性和...

浅谈vue中使用编辑器vue-quill-editor踩过的坑

10-15

在Vue项目中，使用`vue-quill-editor`作为富文本编辑器时，可能会遇到一系列问题。本文将探讨其中的关键挑战，以及如何通过引入Element UI组件和自定义处理方法来优化图片上传功能。首先，`vue-quill-editor`默认...

Vue+Element使用富文本编辑器的示例代码

08-29

本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码，具有一定的参考价值，有兴趣的可以了解一下

elment-ui使用vue-quill-editor富文本编辑器

qq_37196621的博客

02-08

1112

elment-ui使用vue-quill-editor富文本编辑器

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

2401_84103675的博客

04-04

1288

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。

Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

01-27

8687

执行上面的命令安装，然后在main.js下面加入。在vue页面中使用quill-editor。

ElementUI中使用富文本编辑器(quill-editor）实现图片视频上传，图片拖拽和缩放，以及菜单悬停显示中文和表情包

m0_61820867的博客

07-28

3976

介绍了ElementUI中使用富文本编辑器(quill-editor），优化有些功能（图片缩放，拖拽）视频上传回显以及菜单悬停显示中文以及表情包

简版的富文本编辑器、VUE+ElementUI 富文本编辑器 element ui富文本编辑器的使用(quill-editor) 不好用你来打我！全网醉简单！要复杂的别来！

暂时还没想好博客简介

05-18

1543

简版的富文本编辑器、VUE+ElementUI 富文本编辑器 element ui富文本编辑器的使用(quill-editor) 不好用你来打我！全网醉简单！要复杂的别来！

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

05-18

Element UI的vue-quill-editor富文本编辑器支持插入图片，但是默认的图片上传功能可能不能满足所有需求，需要进行自定义。首先，在vue-quill-editor的配置中添加`imageHandler`方法，用于处理图片上传： ```javascript <template> <quill-editor v-model="content" :options="editorOption"></quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler // 添加imageHandler方法 } } }, methods: { imageHandler () { // 处理图片上传 } } } </script> ``` 然后，可以使用第三方上传组件（如`el-upload`）进行图片上传，上传完成后将图片地址返回给`quill-editor`。可以在`imageHandler`方法中实现该逻辑： ```javascript <template> <div> <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleSuccess" :show-file-list="false" :headers="headers" ref="upload" > <el-button size="small" type="primary">上传图片</el-button> </el-upload> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' import { mapGetters } from 'vuex' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler }, uploadUrl: 'https://www.example.com/upload' // 图片上传地址 } }, computed: { ...mapGetters(['getToken']) // 获取token }, methods: { imageHandler () { const self = this const uploadImg = this.$refs.upload uploadImg.click() uploadImg.$refs.input.onchange = function () { const file = uploadImg.$refs.input.files[0] const formData = new FormData() formData.append('file', file) self.$axios.post(self.uploadUrl, formData, { headers: { 'Authorization': self.getToken // 设置token } }).then(res => { const url = res.data.url // 获取图片地址 const editor = self.$refs.editor.quill // 获取quill对象 const index = (editor.getSelection() || {}).index || editor.getLength() editor.insertEmbed(index, 'image', url) // 插入图片 }).catch(err => { console.log(err) }) } } } } </script> ``` 在这个例子中，使用了`el-upload`组件进行图片上传，上传完成后将图片地址返回给`quill-editor`。在`imageHandler`方法中，通过`this.$refs.editor.quill`获取到了`quill`对象，然后调用`insertEmbed`方法插入图片。需要注意的是，由于`quill`对象是异步创建的，所以需要在`mounted`生命周期中获取到`quill`对象才能进行图片插入。可以使用`$nextTick`方法来确保获取到了`quill`对象： ```javascript <template> <quill-editor v-model="content" :options="editorOption" ref="editor"></quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler } } }, mounted () { this.$nextTick(() => { // 获取quill对象 const editor = this.$refs.editor.quill // 在quill对象中添加图片上传功能 editor.getModule('toolbar').addHandler('image', () => { this.$refs.upload.click() }) }) }, methods: { imageHandler () { // 处理图片上传 } } } </script> ``` 在这个例子中，通过`editor.getModule('toolbar').addHandler`方法，在`quill`对象中添加了一个`image`按钮，点击该按钮时触发了上传图片的逻辑。