quill-editor富文本编辑器高度设置问题

于 2020-11-02 20:13:19 发布 4253 收藏
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lchuyan/article/details/109456408
版权

最近使用vue框架写一个小型的电商管理后台，里面有一个模块需要用到了quill-editor富文本编辑器，但是这个富文本编辑器的默认高度只有一行，与项目需求不同。 当我在.vue文件的中加入以下代码：

.ql-editor{
	min-height: 300px;
}

本来以为这样就能将富文本的高度改变了，但是神奇的一幕发生了—富文本编辑器的高度却没有变化，于是我把这段代码放到global.css（公共样式文件）文件中，富文本编辑器的高度却达到了预期的效果

基本信息
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
主要为大家详细介绍了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-quill-editor富文本编辑器简单使用方法
12-01
文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用，具体操作步骤如下： 安装： npm install vue-quill-editor --save main.js： import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' 在需要使用的地方： <template> <quill-editor v-mod
react-quill插件使用
qq_39634880的博客
03-28 327
三.代码封装一个插件（里面有问题的记录）二.本人安装的插件版本。
Vue-Quill-Editor富文本编辑器的使用教程
10-17
主要为大家详细介绍了Vue-Quill-Editor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
【移动端VUE】使用富文本编辑器插件 vue-quill-editor 以及移动端适配踩过的坑
weixin_55846296的博客
10-18 2689
【移动端VUE】使用富文本编辑器插件 vue-quill-editor以及在移动端适配过程中踩过的一些坑
渲染富文本编辑器并设置富文本编辑器的高度
m0_67841039的博客
06-22 961
前端富文本编辑器的使用
富文本插件 vue-quill-editor
xiaoxian_xian的博客
09-26 250
安装： npm i vue-quill-editor 导入富文本样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' 导入富文本组件 import { quillEditor } from 'vue-quill-editor' 注册组件 components: { quillEditor } 使用 <quill-ed
quillEditor 高度设置
JiaWei
03-01 1万+
问题：quillEditor 高度设置 // 设置编辑器高度 this.editor.container.style.height = `${500}px` 问题：解决
富文本编辑器vue-quill-editor高度问题
zhangyysp的博客
12-23 1347
富文本编辑器vue-quill-editor的高度默认不够时 在global中添加样式 .ql-editor{ min-height: 300px; } 样式可以在浏览器验证信息中查看
富文本编辑器Vue-Quill-Editor--高度设置问题
Ceiee的博客
08-27 808
富文本编辑器Vue-Quill-Editor--高度设置问题
详解Vue基于vue-quill-editor富文本编辑器使用心得
10-17
主要介绍了Vue基于vue-quill-editor富文本编辑器使用心得，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-quill-editor+plupload富文本编辑器实例详解
12-12
1,先给vue项目中下载vue-...import { quillEditor }from 'vue-quill-editor' import '@/assets/js/crypto1/crypto/crypto.js' import '@/assets/js/crypto1/hmac/hmac.js' import '@/assets/js/crypto1/sha1/sha1.js'
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor
04-03
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的，而我们实际开发需要将图片存在自己的服务器中...
vue使用富文本编辑器vue-quill-editor
热门推荐
qq_44552416的博客
07-15 1万+
1），安装插件（2），在文件中导入包（3），在原本的配置项上添加（与toolbar平级进行配置）toolbar{},//调整图片大小imageResize{{//在quill中使用toolbar{{this.openWorkReport**}}//方法中使用openWorkReport(){效果httpshttpshttpshttpshttps。......
Quill富文本编辑器的实践 - DevUI
kagol的博客
05-28 759
DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！
vue-quill-editor富文本编辑器使用步骤
m0_65005402的博客
06-20 897
效果图如下:一:安装npm install vue-quill-editor -S二:引入到项目中{两种挂载方式:全局挂载和组件中挂载}2.1:全局挂载 import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css' // 引入样式 import 'quill/dist/quill.snow.css' // snow theme import 'quill/dist/quill.bubble.css' // bu
vue-quill-editor vue3
最新发布
05-01
vue-quill-editor是一个基于Quill编辑器的Vue.js组件，可以快速地实现富文本编辑器功能。而Vue3是Vue.js的新版本，与Vue2相比有很多改进和优化，提供更好的性能和更好的开发体验。目前，vue-quill-editor还没有适配Vue3，但是它的维护者已经在计划中，相信很快会推出Vue3的版本。在使用Vue3时，可以选择其他的富文本编辑器组件或者自己封装一个。Vue3的性能优化让开发者可以更加顺畅地使用富文本编辑器，同时也提供了更加灵活和直观的API和生命周期，能够更好地管理组件的状态和行为。总体来说，对于使用Vue.js开发富文本编辑器的开发者来说，Vue3的推出是一个好消息，可以提高开发效率和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

基本信息

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值