在Vue中使用Quill富文本编辑器的教程

项目需要引入Quill文本编辑器，根据要求需要自定义字体选项，拖拽上传图片，改变大小，所以我按照Quill官网系统学习，以下是我学习研究的结果。

一.主题

奎尔的富文本编辑器分为雪花和泡泡。

Snow有一个工具栏，如下所示：

泡泡只有文本字段，如下所示：

那么具体如何选择呢

在vue项目中，在引入Quill的文件中，你可以写任何你需要的主题。默认为雪花主题。

脚本导出默认值{ data : function(){ return { editor option : {//them : ' bubble ' them : ' snow ' } } } }/脚本ii。自定义工具栏

1.具体配置如下，需要写哪一个。

脚本导出默认值{ data : function(){ return { editor option : } modules : { toolbar 3360 [' bold '，' italic '，'下划线'，' strike']，//bold，Italic，下划线，删除线['blockquote '，' code-block']，//reference，代码块[{'header' : 1}，{'header' : 2}]，//title，键值对的形式；1和2代表字体大小[{'list' :' ordered'}，{'list' :' bullet'}]，//list [{'script' :' sub'}，{'script' :' super'}]，//下标[{ '缩进' :'-1'}，{ '缩进' :' 1'}]，//缩进[{ 'direction': 'rtl' }，//文本方向[{'size '字体背景色[{ 'font': [] }]，//字体[{ 'align': [] }]，//对齐['clean']，//清除字体样式['image '，' video'] //上传图片和视频] }，那么如果要自定义，请往下看。

2.自定义字体列表并添加您需要的字体

(1)在app.vue文件中引入一个单独的自定义font.css文件(如下图)，因为默认文件只有在初始化时引入才能被覆盖！非常重要

模板div id='app '路由器-视图//div/模板脚本导出默认{ name : ' App ' }/脚本样式@import '。/style/font '；/style(2)font.css

把需要自定义的字体放在这个css的字体列表中，选择器如下。数据后的值-值应该在后面拼写。ql-font-，这需要保持一致。

[数据-值=a] ql-font-a

内容是指字体列表中的一个选项。ql-snow .ql-picker.ql-font .QL-拾取器-标签[数据-值=SimSUn]:之前，2000年.ql-snow .ql-picker.ql-font .{ content: '之前的QL-提货人-项目[数据-价值=SimSUn]:宋体；font-family : ' SimSUn}.ql-snow .ql-picker.ql-font .QL-提货人-标签[数据值=SimHei]:之前，2000年.ql-snow .ql-picker.ql-font .{ content: '之前的QL-提货人-项目[数据值=SimHei]:黑体；font-family : ' SimHei}.ql-snow .ql-picker.ql-font .QL-提货人-标签[数据-价值=微软-雅黑]:之前，ql-snow .ql-picker.ql-font .{内容： '之前的QL-选取器-项目[数据-值=微软-雅黑]:微软雅黑；字体系列： '微软雅黑；}.ql-snow .ql-picker.ql-font .QL-提货人-标签[数据-价值=KaiTi]:之前.ql-snow .ql-picker.ql-font .{内容： '之前的QL-选取器-项目[数据-值=KaiTI]:楷体；font-family : ' Kaiti}.ql-snow .ql-picker.ql-font .之前的QL-提货人-标签[数据-值=宋芳]:ql-snow .ql-picker.ql-font .{ content: '之前的QL-提货人-项目[数据-值=宋芳]:仿宋；font-family: "宋芳";}.ql-snow .ql-picker.ql-font .QL-提货人-标签[数据值=Arial]:之前，2000年.ql-snow .ql-picker.ql-font .在{ content: 'Arial '之前的QL-提货人-项目[数据-价值=Arial]:font-family : ' Arial}.ql-snow .ql-picker.ql-font .QL-提货人-标签[数据-价值=时代-新罗马]:之前，ql-snow .ql-picker.ql-font .QL-选取器-项目[数据-值=时代-新罗马]:在{内容： '时代新罗马'；字体系列：《新罗马时代》；}.ql-snow .ql-picker.ql-font .QL-picker-label[data-value=sans-serif]: before，ql-snow .ql-picker.ql-font .在{ content: '无衬线'之前的QL-提货人-项目[数据-价值=无衬线]:font-family: "无衬线";} .QL-字体-SimSUn { font-family : ' Simsun '；}.QL-font-SimHei { font-family : ' SimHei '；}.QL-字体-微软-雅黑{ font-family : '微软雅黑'；}.QL-font-Kaiti { font-family : ' Kaiti '；}.QL字体宋芳{ font-family: '宋芳；}.QL-字体-Arial { font-family : ' Arial '；}.QL-字体-时代-新罗马{字体系列： '时代新罗马'；}.QL字体无衬线字体；}(3).某视频剪辑软件文件中

从《羽毛笔编辑》导入脚本{ quillEditor }，从“羽毛笔”//导入*为刺引入编辑器//羽毛笔编辑器的字体var fonts=['SimSun '，' SimHei '，' Microsoft-YaHei '，' KaiTi '，'宋芳，‘Arial’，‘Times-New-Roman’，‘sans-serif’]；var Font=Quill。导入('格式/字体')；字体。白名单=字体；//将字体加入到白名单羽毛笔寄存器（字体，真);导出默认的{ data : function(){ return { content : }，编辑器选项： { modules : { toolbar : [' bold '，' italic '，'下划线，' strike']，['blockquote '，' code-block']，[{ ' header ' : ' 2 }]，[{ 'list': 'ordered'}，{ ' list ' : ' bullet ' }，[{ '把上面定义的字体数组放进来[{ 'align': [] }]，['clean']，['image '，' video'] ] }，它们： ' snow ' } } } } } } }脚本/脚本效果图如下：

三、图片拖拽上传ImgeDrop

从《羽毛笔编辑》导入脚本{ quillEditor }，从“羽毛笔”//导入*为刺引入编辑器//羽毛笔图片可拖拽上传从“羽毛笔图像投放模块”导入{ ImageDrop }；奎尔。注册(' modules/imageDrop '，imageDrop)；导出默认{ data : function(){ return { editor options : { modules : { imagedrop : true，}，them : ' snow ' } } } }脚本四、图片调整大小图像调整大小

从《羽毛笔编辑》导入脚本{ quillEditor }，从“羽毛笔”//导入*为刺引入编辑器//羽毛笔图片可拖拽改变大小从“羽毛笔-图像-调整大小-模块”中导入图像调整羽毛笔的大小。注册('模块/图像调整大小'，图像调整大小)导出默认{ data : function(){ return { editor options : { modules : { ImageResize : } }，theme : ' snow ' } } } } }脚本效果图如下：可以调整图片的对齐方式，并显示图片的大小

刺使用基本如上。安装可参考：vue如何安装使用刺富文本编辑器

其他应用可参考刺官网https://quilljs.com/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。