是否可以创建具有复杂子结构的自定义格式/印迹? [英] Is it possible to create a custom format/blot with complex substructure?
问题描述
我正在研究 Quill 在一个项目中的使用,我需要知道是否可以创建比单个元素和单个参数更复杂的自定义格式/印迹.
我想要的布局之一的示例是:
<span class="format-info" data-attr="param 1 (非显示)">参数 2(显示给用户 - 单击以调用应用程序 UI 进行编辑)</span><span class="格式内容">用户的文本/子元素到这里</span></span>
在我调查的所有情况下,自定义格式都属于内联范围,并且仍然有一个父容器和一个供子内容去的地方.
Quill 中的自定义格式目前似乎没有很好的文档记录.我在源代码中四处寻找,并发现这在 0.20.1 中很可能是不可能的.但是,我觉得在 1.0.0 测试版中使用 Parchment 是可行的,我只是不确定我实际需要编写的具体内容.
这在 1.0.0 中可行吗?如果是这样,怎么做?
这就是我想要的:
所以,我最终以最小的努力想出了如何做到这一点.它涉及为 Quill 1.3 或更高版本定义新的印迹类型,相同的代码应该适用于旧版本,但未经测试.
有关工作示例,请参阅代码片段.关键是扩展现有的 Embed Blot 'blots/embed' 并定义您自己的工具栏处理程序以注入任意 DOM 节点实例.
//用于继承非原型方法/属性的实用函数功能扩展(目标,基地){for (var prop in base) {目标[道具] = 基地[道具];}}//自定义 Blot 的定义.(功能(嵌入){'使用严格';功能跨度(){Object.getPrototypeOf(Embed).apply(this, arguments);}Span.prototype = Object.create(Embed && Embed.prototype);Span.prototype.constructor = 跨度;扩展(跨度,嵌入);Span.create = 函数创建(值){返回值;//期望一个 domNode 作为值};Span.value = 函数值(domNode){返回 domNode;};Span.blotName = 'span';Span.tagName = 'SPAN';Span.className = '复杂';Quill.register(Span, true);})(Quill.import('blots/embed'));//导入嵌入印迹.这很重要,因为它正在扩展//工具栏按钮的自定义处理程序var 处理程序 = 函数(){var complexSpan = document.getElementById('complextype').firstElementChild.cloneNode(true);var selection = quill.getSelection();quill.insertEmbed(selection.index, 'span', complexSpan);}//实例化羽毛笔.请注意, modules.toolbar.handlers 有一个跨度"处理程序.Quill 解析//工具栏标记中按钮上的类:'ql-span' this is 'ql-' + blotNamevar quill = new Quill('#editor', {模块:{工具栏:{容器:'.toolbar',处理程序:{跨度":处理程序}}},主题:雪"});
:root {--complex-bgcolor: #767676;--font-color: #FFFFFF;}html {字体大小:10px;}button.ql-span {宽度:15rem !重要;}.复杂的 {边界半径:1rem;边框:0.2rem纯黑色;保证金:0.3rem;}.内{边界半径:1rem;背景:var(--complex-bgcolor);颜色:var(--font-color);填充左:0.6rem;填充右:0.6rem;}.格式化{字体粗细:粗体;字体样式:斜体;文字装饰:下划线;}.嵌套{左边距:0.3rem;右边距:0.3rem;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css"/><div id="包装器"><div id="工具栏" class="工具栏"><span class="ql-formats"><button class="ql-bold"></button><button class="ql-italic"></button><button class="ql-underline"></button></span><span class="ql-formats"><button class="ql-span">复杂跨度类型</button></span>
<div id="editor">Lorem Ipsum<span contenteditable="false"><span class="complex"拼写检查="false"><span class="inner">应用的格式</span><span class="nested">更多文字</span><span class="formatting">带格式</span><span class="nested">dolor</span></span></span>坐下
<div id="complextype" style="display:none;"><span contenteditable="false"><span class="complex" spellcheck="false"><span class="inner">应用格式</span><span class="nested">;更多文本</span><span class="formatting">带格式</span><span class="nested">dolor</span></span></span>