欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue集成一个支持图片缩放拖拽的富文本编辑器

程序员文章站 2022-11-13 17:21:38
需求:根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑...

需求:

根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑器。经过多次尝试,最终选择了wangeditor富文本编辑器。 最初使用的是vue2editor富文本编辑器,vue2editor本身是不支持图片拖拽的,但是提供了可配置图片拖拽的方法,需要借助quill.js来实现图片拖拽。虽然满足了业务需求,但是在移动端展示的效果不是很理想。 此次编辑器主要是上传的富文本需要在移动端进行展示,为了达到理想效果,需要能修改图片百分比,当设置img标签的width属性为100% 时,就可以满足需求。最近发新版本(第四版 v4)的wangeditor可以满足需求,最终选择了它用于实际开发中。

效果图:

vue集成一个支持图片缩放拖拽的富文本编辑器

代码案例及相关配置如下:

安装插件

编辑器配置

注: 具体参数配置请参考。

组件中使用抽离的编辑器:

以上就是vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容,更多关于vue 富文本编辑器的资料请关注其它相关文章!