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/

案例1：扩展原有插件

// 字体 https://blog.csdn.net/Alison_Rose/article/details/ 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代码：

  a 

编写脚本代码：

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); } } }); } }