Quill QuillEditor (vue3+vite4.0)

已于 2024-07-23 17:48:07 修改
阅读量367 收藏 1
点赞数 5
文章标签： vue.js 前端 javascript 前端框架
于 2024-04-01 15:25:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40191457/article/details/137234789
版权

quill-image-resize-module 无法使用

将插件替换成quill-blot-formatter

用法基本与quill-image-resize-module一致，且无需再vite或者webpack里面配置inject！

import BlotFormatter from 'quill-blot-formatter';

Quill.register('modules/blotFormatter', BlotFormatter)

最后在modules里面配置下

blotFormatter: {
      toolbar: {
        mainClassName: 'blot-formatter__toolbar'
      }
    },

---------------------------------------------------------------------------------------------------------------------------------

不好意思最新发现，这个替换的插件在 vite + vue3 中生产环境有问题

小黄小黄吃三碗
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 中vue-quill富文本编辑器图片缩放
PinelliaLogic的博客
04-15 384
Vue3 中quill富文本编辑器图片缩放
vue3中引入quill编辑器并且控制图片的大小
最新发布
weixin_55973411的博客
05-13 511
1.下载quill编辑器。2.下载缩放图片的组件。
Vue3适用的富文本编辑器(vue2.0 vue-quill-editor)
weixin_55609002的博客
08-15 1387
vue3.0 使用vue-quill-editor 报错 建议使用VueQuill
vue3中使用vueQuill富文本编辑器详细教程，图片上传-图片压缩
阿Q
07-12 9895
此处用到的模块功能有上传图片，和调整图片缩放，具体可以参考官网，安装后，进行通过Quill.register()注册模块，然后在配置项进行使用。注意：目前版本暂不支持表格，如果需要使用表格模块，需要安装quill@2.0.0-dev.4。在公共组件components中创建QuillEditor文件夹index.vue。vueQuill是支持vue3的富文本编辑器组件，使用简单方便；1. 安装：（在官网有详细的安装教程）;引入封装好的QuillEditor组件。
Vue3使用vue-quill富文本 图片缩放、拖拽功能
不甜呐的博客
06-13 2739
Vue3使用富文本插件 图片缩放、拖拽功能。
@vueup/vue-quill 富文本要使用quill-better-table表格插件，必须要依赖quill的v2-dev版本 但是如果这样其他的插件比如quill-blot-formatt用不了
Frank_colo的博客
12-22 1201
vueup/vue-quill 富文本要使用quill-better-table表格插件，必须要依赖quill的v2-dev版本， 但是如果这样其他的插件比如quill-blot-formatt就用不了，这个插件依赖quill的1版本。如果你的项目同时要用表格插件和其他插件，由于插件依赖的quill版本不同，是会报错的，用不了。也就是说，如果你用表格插件，quill的版本就必须安装v2-dev版本。如果你用其他插件，quill的版本就必须安装v1版本。
vue3富文本编辑器vue-quill-editor、图片缩放ImageResize详细配置及使用教程
热门推荐
qq_33674679的博客
12-01 2万+
vue3富文本编辑器vue-quill-editor详细配置及使用
[转]vue3 + vite 使用 vue-quill 富文本库、使用图片大小、拖拽等插件
扛麻袋的少年的博客
06-01 2338
Vue3使用的 vite 脚手架安装这几个库：富文本：npm install @vueup/vue-quill图片拖拽插件：npm install quill-image-drop-module图片缩放大小插件：npm install quill-image-resize-module使用这个库：这个库可以实现 webpack.ProvidePlugin({…}) 的方式在 Vite 中 plugins 节点下Quill 富文本注册插件ImageDrop。
vue3.0 vue-quill-editor.rar
09-19
总的来说，Vue3.0 + Vue-Quill-Editor的组合为开发者提供了强大的富文本编辑功能，结合Vue CLI 3的快速开发能力，可以高效地构建出具有图片上传和尺寸调整功能的文本编辑器应用。在实际操作中，需注意版本兼容性、...
vue-quill:Vue 3组件的笔管编辑器
03-21
强大的文本编辑器的Vue 3 + Quill Component。 概述 VueQuill是用于构建富文本编辑器的Vue组件，此软件包是Quill的一个薄包装，使它在Vue 3应用程序中更易于使用。 :green_heart:使用Vue 3构建：比以前更强大，更...
quill-data-format
06-27
羽毛笔数据格式 该存储库包含 quill 数据格式的规范。 数据格式为 jsonschema。 它可用于创建导入/导出实用程序。 quill 可以导入任何符合此模式的 JSON 数据集。 运行测试 npm run test
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor :open_book:项目介绍 vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4版本。 内置了代码高亮插件highlight.js ，使用的主题是Lioshi :light_bulb:注意 基于wangeditor默认配置，修改了我自己的替代配置 focus: false // 是否自动聚焦到编辑器，默认是 true ，我改成 false emotions: [ ] // 添加了大部分常见的 emoji 表情 languageTab: ' ' // 编辑器中按下 tab 键默认添加 4 个空格，我的习惯是 2 格 menuTooltipPosition: 'do
quill-blot-formatter:用于Quill的模块，允许调整编辑器元素的大小，重新放置等
05-23
羽毛笔墨迹格式化程序 用于格式化文档模块。 在很大程度上受启发。 开箱即用支持调整图像和iframe视频的大小和重新 ，但是可以使用和轻松扩展。 演示版 安装 使用yarn ： yarn add quill-blot-formatter 使用npm ： npm install --save quill-blot-formatter 用法 作为模块 import Quill from 'quill' ; // from the index, which exports a lot of useful modules import BlotFormatter from 'quill-blot-formatter' ; // or, from each individual module import BlotFormatter from 'quill-blot-formatter/d
vue3-quill:vue3的笔管编辑器
04-02
vue3-羽毛笔vue3的笔管编辑器用法npm i vue3 - quill // globalimport { quillEditor , Quill } from 'vue3-quill'import customQuillModule from 'customQuillModule'Quill . register ( 'modules/...
vue3+elementPlus后台管理系统
08-19
Vue3 + ElementPlus 后台管理系统是一个基于Vue.js最新版本（Vue3）和ElementPlus UI库构建的高效、易用的后台管理平台。Vue3带来了许多改进和优化，包括Composition API、Suspense、Teleport等新特性，提升了开发...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
解决Vue3+Vite使用富文本插件quill-image-resize-module打包时报错image-resize.min.js没有默认导出
weixin_51002293的博客
06-22 2077
2. 搜索引擎检索出来的都是引入的报错，可以将ImageResize改为imageResize，未解决。1. 查看quill-image-resize-module源码，正确导出了ImageResize。5. 上github查找是否有类似问题，解决。3. 将默认导入改为按需导入，未解决。4. 卸载依赖重装，未解决。
vue+elementui使用富文本编辑器vue-quill-editor
好气嗷，但仍要保持微笑!
12-01 392
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)使用组件 ...
vue3+vite整合Quill
05-31
好的，下面是整合Quill的步骤： 1. 安装Quill和相关依赖 在项目中使用npm或yarn安装Quill和相关依赖： ``` npm install quill vue-quill-editor@next ``` 2. 导入Quill和VueQuillEditor 在组件中导入Quill和VueQuillEditor： ```js import Quill from 'quill' import { VueQuillEditor } from 'vue-quill-editor' ``` 3. 注册VueQuillEditor组件 在Vue组件中注册VueQuillEditor组件： ```js export default { components: { VueQuillEditor }, } ``` 4. 在组件中使用VueQuillEditor 在Vue组件的template中使用VueQuillEditor组件： ```html <template> <div> <vue-quill-editor v-model="editorHtml" /> </div> </template> ``` 5. 配置Quill选项 可以在组件中配置Quill的选项，例如： ```js export default { components: { VueQuillEditor }, data() { return { editorHtml: '', editorOption: { placeholder: '请输入内容...', theme: 'snow' } } } } ``` 6. 运行项目 使用vite启动项目： ``` npm run dev ``` 这样，Quill就成功整合到了Vue3+vite项目中，可以在页面上使用富文本编辑器了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值