Iefans,靠谱的软件下载站

首页 最新文章 最新安卓 最新苹果 浏览器 IE教程 在线图片编辑 最新软件 最新游戏

当前位置: IEfans / IE专区 / IE修复/ 详解Vue基于vue-quill-editor富文本编辑器使用心得

详解Vue基于vue-quill-editor富文本编辑器使用心得

编辑:秩名2023-02-28 23:34:01

vue-quill-editor的guthub地址 ,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧!

那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下:

image.png

再安装依赖项

image.png

使用:

在main.js中进行引入

image.png

下面的css一定还要引用,否则编辑器将会没有css。

在vue页面中代码如下:

image.png

其中的v-model就是我们自己的html代码,你可以将这个html直接放到数据库,这样也就没有什么问题了。如果想要禁用编辑器可以通过以下代码:

image.png

主题设置

在vue项目中,具体引入Quill的文件中,需要使用哪种主题就写哪个。默认是snow主题的。

image.png

工具栏设置

image.png

图片推拽上传

需要安装 quill-image-drop-module 模块,那么改一下imageDrop设置为true,你就可以把你电脑上的图片网上一坨就可以了。

image.png

那上传文件那你就不用想了,你也许想先把图片放上去,其实这个文件托上去就已经是个base64了,等你在前台读数的时候直接decode就好~

图片调整大小ImageResize

image.png


返回旧版Copyright © 1998-2023 www.iefans.net All Rights Reserved 沪ICP备17019769号-18 意见反馈