时间戳

首页 > 解决方案 > 带有子印迹的 Quill Wrap Blot 值

javascript - 带有子印迹的 Quill Wrap Blot 值

问题描述

我想默认所有文本使用 Arial 字体样式和 12px 字体大小。

如果我将这些设置为工具栏的默认值，则工具栏 UI 不会更改为一种颜色来指示您所在的位置（例如，如果我将光标放在一些样式为 15 像素和日内瓦的文本中，则字体和大小选择器的 UI 将是蓝色的。但是如果我将 UI 默认为 15 和日内瓦，那么每当我将光标放在一些以这种方式设置样式的文本时，它就会切换到它，但 UI 不会有那个突出显示颜色）。

为了解决这个问题，我只是选择不设置默认值。效果很好，除非我从数据库中读取一些遗留值。这些遗留值看起来像这样，

<p> This is legacy text </p>

并且应该默认为 Arial 字体样式和 12px 大小。

因此，理想情况下，我希望 Quill 将其转换为：

<p>
  <span class="ql-font-arial" style="font-size: 12px;">This is legacy text.</span>
</p>

但是在创建印迹时，我无法让 Quill 接受子节点。如果我附加一个孩子，它会被优化，因为那个孩子没有内容。如果我添加一个子节点并返回一个子节点，则父节点永远不会被 Quill 确认并且不会出现在样式中（并将所有内容放在同一行，因为它现在只是一个巨大的优化span标签。）

有没有办法让印迹使用格式本身来生孩子并将数据粘贴到孩子身上？这就是我现在用来捕捉的

标签并保留它们可能具有的任何对齐格式。但我不知道如何让它默认将数据包装在子<span>标签中。

const BlockBlot = Quill.import('blots/block');

export class PBlot extends BlockBlot {
  static create(data: { alignment: string }) {
    let node: Element = document.createElement('P');
    if (data && data.alignment) {
      node.setAttribute('class', `ql-align-${data.alignment.toLowerCase()}`);
    }
    let sNode = document.createElement('SPAN');
    node.appendChild(sNode);
    //return sNode;
    return node;
  }

  static formats(node: Element) {
    return { alignment: node.getAttribute('align') || undefined };
  }
}
PBlot.tagName = 'P';
PBlot.blotName = 'block';

标签： javascripttypescriptquill

解决方案

尝试使用 aconst BlockEmbed = Quill.import('blots/block/embed');代替。更改tagName为<div>也可能有效。

推荐阅读