是否可以创建具有复杂子结构的自定义格式/印迹？

Question

我正在研究将Quill用于项目，我需要知道是否可以创建比单个元素和单个参数更复杂的自定义格式/印迹。

我想要的一个布局的例子是：

<span class="format-container">
    <span class="format-info" data-attr="param 1 (non-displayed)">
        param 2 (displayed to user -- click to invoke application UI to edit)
    </span>
    <span class="format-content">
        User's text/child elements go here
    </span>
</span>

在我查看的所有情况下，自定义格式都是内联作用域，并且仍然只有一个父容器和一个用于子内容的位置。

Quill中的自定义格式目前似乎没有得到很好的记录。我在消息来源中探索过，并且能够发现这很可能在0.20.1中不可能。但是，我觉得它可以在1.0.0测试版/羊皮纸中实现，我只是不确定我实际需要写的具体内容。

这在1.0.0中可能吗？如果是这样，怎么办呢？

编辑：这就是我的目标：

Answer 1

所以，我想出了如何以最小的努力做到这一点。它涉及为Quill 1.3或更高版本定义一个新的印迹类型，相同的代码应该适用于旧版本但是未经测试。

有关工作示例，请参阅代码段。关键是扩展现有的Embed blot'blots / embed'并定义自己的工具栏处理程序以注入任意DOM节点实例。

// utility function used to inherit non prototypical methods/properties
function extend(target, base) {
  for (var prop in base) {
    target[prop] = base[prop];
  }
}

// definition of a custom Blot.
(function(Embed) {
  'use strict';

  function Span() {
    Object.getPrototypeOf(Embed).apply(this, arguments);
  }

  Span.prototype = Object.create(Embed && Embed.prototype);
  Span.prototype.constructor = Span;
  extend(Span, Embed);

  Span.create = function create(value) {
    return value; // expects a domNode as value
  };

  Span.value = function value(domNode) {
    return domNode;
  };

  Span.blotName = 'span';
  Span.tagName = 'SPAN';
  Span.className = 'complex';

  Quill.register(Span, true);
})(Quill.import('blots/embed')); // import the embed blot. This is important as this is being extended

// custom handler for the toolbar button
var handler = function() {
  var complexSpan = document.getElementById('complextype').firstElementChild.cloneNode(true);
  var selection = quill.getSelection();

  quill.insertEmbed(selection.index, 'span', complexSpan);
}

// instantiate quill. Note that modules.toolbar.handlers has a 'span' handler. Quill parses this from // the class on the button in the toolbar markup: 'ql-span' this is 'ql-' + blotName
var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '.toolbar',
      handlers: {
        'span': handler
      }
    }
  },
  theme: 'snow'
});

:root {
  --complex-bgcolor: #767676;
  --font-color: #FFFFFF;
}

html {
  font-size: 10px;
}

button.ql-span {
  width: 15rem !important;
}

.complex {
  border-radius: 1rem;
  border: 0.2rem solid black;
  margin: 0.3rem;
}

.inner {
  border-radius: 1rem;
  background: var(--complex-bgcolor);
  color: var(--font-color);
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.formatting {
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

.nested {
  margin-left: 0.3rem;
  margin-right: 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="wrapper">
  <div id="toolbar" class="toolbar">
    <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">Complex Span Type</button>
    </span>
  </div>

  <div id="editor">Lorem Ipsum 
    <span contenteditable="false">
      <span class="complex" spellcheck="false">
        <span class="inner">Format applied</span>
        <span class="nested">More text</span>
        <span class="formatting">with formatting</span>
        <span class="nested">dolor</span>
      </span>
    </span> sit amet
  </div>
</div>

<div id="complextype" style="display:none;">
<span contenteditable="false"><span class="complex" spellcheck="false"><span class="inner">Format applied</span><span class="nested">More text</span><span class="formatting">with formatting</span><span class="nested">dolor</span></span></span>
</div>

Answer 2

文档和指南仍在编写中，但一个好看的地方是如何实现现有的自定义格式。特别是公式格式与您的用例非常相似。