Quill.js 专题

参考：

https://luncher.github.io/2018/06/02/Quill%E7%BC%96%E8%BE%91%E5%99%A8%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6/

https://www.cnblogs.com/calvinK/p/6322512.html?utm_source=tuicool&utm_medium=referral

中文文档：

https://bingkui.gitbooks.io/quill/content/guides/howtocustomizequill.html

https://www.kancloud.cn/liuwave/quill/1409378

案例1：扩展原有插件

// 字体 https://blog.csdn.net/Alison_Rose/article/details/79929319
var fonts = ['SimSun', 'SimHei', 'MicrosoftYaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif','yrdzst'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

案例2：自定义下拉菜单按钮插件（文字行高）

定义按钮样式：

.ql-line-height .ql-picker-label::before,.ql-line-height .ql-picker-item::before {content: '文字行高';
}.ql-line-height .ql-picker-label[data-label=a]::before,.ql-line-height .ql-picker-item[data-label=a]::before {content: '行高(1倍)';
}

编写按钮html代码：

<select title="文字行高" class="ql-line-height"><option selected></option><option value="1">a</option>
</select>

编写脚本代码：

var Parchment = window.Quill.import('parchment');
// 文字间距
// 定义class选择符（按需求添加）
//第二个参数为作用到html代码里的class选择符
Parchment.register(new Parchment.Attributor.Class('line-height', 'ql-line-height', {scope: Parchment.Scope.INLINE, // INLINE:行内元素, BLOCK:块元素，EMBED:封装类型(如：Video)whitelist: ['a', 'b', 'c', 'd', 'e']
}))
// 定义style样式（按需求添加）
Parchment.register(new Parchment.Attributor.Style('line-height', 'line-height', {scope: Parchment.Scope.INLINE,whitelist: ['1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', '2.1', '2.2', '2.3', '2.4', '2.5', '2.6', '2.7', '2.8', '2.9', '3', '3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '4']
}))

选择菜单后元素里会添加 style="line-height:2.6;" 样式代码，效果图：

如果要实现元素属性，类似data-lineHeight="1.3",效果图：

代码如下：

var Parchment = window.Quill.import('parchment');Parchment.register(new Parchment.Attributor.Attribute('lineHeight', 'data-lineHeight', {scope: Parchment.Scope.INLINE,whitelist: ['1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', '2.1', '2.2', '2.3', '2.4', '2.5', '2.6', '2.7', '2.8', '2.9', '3', '3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '4']
}));

有个问题，添加的data-lineHeight值在quill初始化的时候会被过滤，本人不知道要怎么设置，知道的小伙伴留言告知下

quill.js如果没有选择过下拉菜单的话，默认是不选中当前文字大小或行高的选项，需要在源代码里手动添加，

具体代码（源代码中搜索 input.classList.toggle('ql-active' 即可定位到）：

{key: 'update',value: function update(range) {var _this = this;var formats = range == null ? {} : this.quill.getFormat(range);this.controls.forEach(function(pair) {var _pair = _slicedToArray(pair, 2);var format = _pair[0];var input = _pair[1];try{// try块里的即为添加的初始化代码if (format ==='size' && !formats.size){var s = $(_this.quill.container).css('font-size');if (s && s.indexOf('px') > -1){formats.size = parseInt(s.replace('px', ''));}}if (format === 'line-height' && !formats['line-height']){var lineHeight = $(_this.quill.container).css('line-height');if (!window.lineHeightMap){window.lineHeightMap = {};var s = 13.2;var v = 1;for(var i = 0; i< 31; i++){s = Math.round((s + 1.2)* 10) / 10;v = Math.round((v + 0.1)*10)/10;window.lineHeightMap[s+'px'] = v + '';}}if ('normal' === lineHeight){formats['line-height'] = '1';}else{formats['line-height'] = window.lineHeightMap[lineHeight];}}}catch(e){console.log(e);}if (input.tagName === 'SELECT') {var option = void 0;if (range == null) {option = null;} else if (formats[format] == null) {option = input.querySelector('option[selected]');} else if (!Array.isArray(formats[format])) {var value = formats[format];if (typeof value === 'string') {value = value.replace(/\"/g, '\\"');}option = input.querySelector('option[value="' + value + '"]');}if (option == null) {input.value = ''; // TODO make configurable?input.selectedIndex = -1;} else {option.selected = true;}} else {if (range == null) {input.classList.remove('ql-active');} else if (input.hasAttribute('value')) {// both being null should match (default values)// '1' should match with 1 (headers)var isActive = formats[format] === input.getAttribute('value') || formats[format] != null && formats[format].toString() === input.getAttribute('value') || formats[format] == null && !input.getAttribute('value');input.classList.toggle('ql-active', isActive);} else {input.classList.toggle('ql-active', formats[format] != null);}}});}}

Quill.js 专题相关推荐

js 点击闭包_【新年跳槽必备】2020最新（前端原生JS专题）面试题速领！
最近我把每周更新的面试题发在我们的学习群里大家似乎都很高冷哇难道是默默的做题去了没说话每期面试题都是Richard老师认真准备的真的希望能帮到大家哦本期是前端原生JS专题 A前端原生JS专 ...
Danfo.js专题 - Series对象
Danfo.js专题 - Series对象 jcLee95 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550 ...
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js与Dnotebook -- pandas.jupyter的JavaScript版本 [前言]:谷歌公司不仅推出了tensorflow的JavaScript版本tensorflow.js ...
Danfo.js专题 - 附：Dnotebook（Danfo Notebook）单机资源与汉化文档
本文是汉化版的Danfo notebook对应修改的demo,与原版demo内容相比,请求csv的路径发生了变化,且部分文字汉化了.该汉化版本在博主发布的资源中可以找到. 由于G内网无法访问该文档,故 ...
ctfshow node.js专题
文章目录 web334 web335 web336 web337 web338 web339 web340 web341 web342.web343 web334 给了附件,然后进入后发现是一个登录框 ...
quill.js官方文档(六)【增量Delta】
Delta被用做描述Quill编辑器的内容和变化,简单但表达力强的数据格式.这种格式本质上是一种JSON格式,人类可读同时及其也能容易识别.Delta能描述任意Quill内容,包括所有的文本.格式信息 ...
2023前端面试（JS专题）
目录一.前言二.问题 1,JS数据类型 2,== 与 === 的区别? 3,JS的宏任务和微任务? 4,实现Jsonp 5,JS作用域 6,JS作用域+this指向+原型笔试题(高频) 7, JS ...
three.js 专题
wagner的作用已经被three集成参看D:\npmwork\three.js-master\examples\js中的shaders和postprocessing文件夹关于提示找不到Orbit ...
AR.js专题-多Renderer支持
支持2渲染器代码参考 https://threejs.org/docs/#examples/renderers/CSS3DRenderer // CSS3Drenderer cssScene = n ...

Quill.js 专题

案例1：扩展原有插件

案例2：自定义下拉菜单按钮插件（文字行高）

Quill.js 专题相关推荐

最新文章

热门文章