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

2024-06-24 11:12:15阅读量：36 字体：大 中 小

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

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

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

再安装依赖项

使用:

在main.js中进行引入

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

在vue页面中代码如下：

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

主题设置

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

工具栏设置

图片推拽上传

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

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

图片调整大小ImageResize


免责声明：

本文《详解Vue基于vue-quill-editor富文本编辑器使用心得》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • 怎么关闭零钱通

    怎么关闭零钱通

    零钱通是微信中的一个理财产品，如果需要关闭，在零钱通的设置中直接关闭即可。具体操作方法如下： 怎么关闭零钱通 1、打开手机微信app，点击我”。 2、点击服务”。 3、点击...

    阅读: 858

  • qq听歌状态怎么显示听的歌

    qq听歌状态怎么显示听的歌

    qq听歌状态可以显示正在QQ音乐听的歌，设置听歌状态后进入QQ音乐听歌即可。具体操作方法如下： qq听歌状态怎么显示听的歌 1、打开手机QQ软件，点击头像上的状态，进入状态设置。 2、找到并点击听歌...

    阅读: 934

  • qq相册怎么转移到另一个qq

    qq相册怎么转移到另一个qq

    qq相册要转移到另一个qq，可以借助转载功能进行转移，使用QQ进入另一个QQ的相册即可进行转载。具体操作方法如下： qq相册怎么转移到另一个qq 1、打开手机QQ软件，点击联系人”，再点击...

    阅读: 877

  • 花呗账单日怎么修改

    花呗账单日怎么修改

    花呗的账单日可以通过修改还款时间来修改，修改花呗的还款时间后，出账单的日子也会改变，通过设置修改花呗的账单日的具体操作步骤如下： 花呗账单日怎么修改 1、打开支付宝app，先点击下方的我的&rdquo...

    阅读: 911

  • 抖音怎么0.5倍速播放

    抖音怎么0.5倍速播放

    抖音视频播放有四种倍速选择，要设置0.5倍播放，在视频播放中即可直接设置。具体操作方法如下： 抖音怎么0.5倍速播放 1、打开手机抖音app，进入视频播放，长按视频，进入播放设置页面。 2、点击倍速...

    阅读: 947

  • 删除微信表情包

    删除微信表情包

    很多人的微信添加了很多表情包，如果要将微信内添加的表情包删除，进入微信的表情功能页面即可进行删除。具体操作方法如下： 删除微信表情包 1、打开手机微信app，点击我”，再点击表情&rdqu...

    阅读: 926

热门文章

最近更新