在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/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:在Vue中使用Quill富文本编辑器的教程是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。