Vue之使用 vue-quill-editor_自定义toolbar_修改图片上传方式

最新推荐文章于 2024-04-10 05:11:47 发布

原创

最新推荐文章于 2024-04-10 05:11:47 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

本文介绍了如何在Vue项目中使用vue-quill-editor，包括安装、引入和使用。重点讲解了如何自定义toolbar，删除不必要的功能，并且详细阐述了如何修改图片上传方式，避免使用base64存储，转而使用上传组件获取的图片地址，以适应大量图片存储的需求。

1.安装

npm install vue-quill-editor --save
install vue-quill-editor --save

2.引入

import { quillEditor } from 'vue-quill-editor'
components: {
    quillEditor
},

 { quillEditor } from 'vue-quill-editor'
components: {
    quillEditor
},

3.使用

<quill-editor v-model="blogContext"   //编辑器内容字段
              ref="myQuillEditor"
              style="background-color: white;"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options,上传图片+美化头部+实用功能

BMG-Princess

06-15

1792

前提：要知道vue-quill-editor是没有文字说明的，现在加个文字说明和上传图片，代码有用！ 1、效果图 2、

告别繁琐！vue-quill-editor只读模式3分钟快速配置指南

热门推荐

div_ma的博客

03-13

12万+

基于webpack和vue 一、npm 安装 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' i...

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

10-16

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

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

11-19

对于自定义图片上传，Vue-quill-editor默认使用Base64编码存储图片，但这种方法可能会导致内容过长，不利于服务器存储。因此，我们需要改用将图片上传到服务器并返回URL的方式。这里利用了Element-UI的`el-upload`...

解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

11-19

同时，了解Vue-Quill-Editor的配置和使用方式，可以帮助我们更好地定制和管理富文本编辑器，提升用户体验。在实际项目中，还可以结合 Vuex 进行状态管理，以及使用axios等库与后端进行数据交互，实现更复杂的编辑器...

vue-quill-editor的使用及个性化定制操作

10-15

Vue-quill-editor是一款基于Quill、专为Vue.js设计的富文本编辑器，适用于服务端渲染和单页面应用。在本文中，我们将详细介绍如何安装和进行个性化定制。 **一、安装** 首先，通过npm安装vue-quill-editor： ```...

Vue中使用quill-editor富文本编辑器之修改工具栏(toolbar)

zouyang920的博客

12-16

3997

1.代码中的使用方式 <template xmlns:v-quill="http://www.w3.org/1999/xhtml"> <div class="wrapper release-tc"> <div class="release-box"> <h3>发布吐槽</h3> <div class="editor"> <div

vue-file-toolbar-menu:Vue应用程序的UI文件工具栏菜单

05-06

特征 :rocket: React性内容存储在Vue.js计算/数据字段中，而不是模板中造型简单为菜单和按钮添加自己的自定义组件使用标准的热键支持兼容触摸设备轻松的多语言实施（） :speech_balloon: 如果您打算构建文档编辑器，还请签出安装在您的Vue.js项目中： npm install vue-file-toolbar-menu :warning: 您的Vue.js项目必须具有支持 :speech_balloon: 如果您喜欢静态文件，请从dist文件夹导入资产基本例子 MyComponent.vue < template> < div> < vue xss=removed> </ div> </ template> < script > import VueFileToolbarMenu from ' vue-file-toolbar-menu '

vue项目中vue-quill-editor自定义图片上传

lannieZ的博客

03-10

350

1、下载 npm install vue-quill-editor-upload --save 2、在main.js中引入 // 导入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' // 将富文本编辑器，注册为全局可用组件 Vue.use(VueQuillEditor) 3、使用 // 导入富文本编辑器样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.c

vue-quill-editor富文本插入图片改为上传服务器

weixin_47342624的博客

01-16

1135

注意：vue-quill-editor插入图片默认转换为base64，对于项目中使用，如果绑定的变量有插入图片，会造成字符串内容过长，造成请求缓慢，长度过限问题。// 引入Qill插件// 设置字体// 设置字体大小// toolbar工具栏['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线['blockquote', 'code-block'], // 引用，代码块。

Vue封装工具栏

AN_MIN的博客

10-17

2377

1、在页面如html、jsp重复写着相同的代码，挺繁琐，而且不便于维护，以下尝试自己学习如何封装工具栏，比如四个按钮：添加删除、修改、查询等，后面可以自己扩展 2、工具栏js /**公共工具栏*/ Toolbar = function(config) { //config是调用时候，传递过来的参数 this.config = config; this.render = funct...

Vue3使用WangEditor富文本编辑器并自定义Toolbar工具栏

Smart_J_King的博客

06-20

4738

更多配置参考使用库说明文档。

Vue()-常用组件之工具栏组件

Good Luck

06-04

1359

工具栏组件

VUE：可收缩工具栏

yyyyyyyyyyy_9的博客

10-18

469

本文记录了一个vue可伸缩工具栏组件，代码即插即用。只需要新增函数名并且填函数体就可以。效果如下图所示，

quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor

04-10

2384

三套“算法宝典”算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！