时间戳

首页 > 解决方案 > 如何使每个元素分开

javascript - 如何使每个元素分开

问题描述

我怎样才能使每个元素分开。目前，每个元素合并为一个<span>元素

<span style="font-family:wingdings;">.4=??????</span>
<span style="font-family:symbol;">QPGH</span>

这是由下面的代码生成的

import Command from '@ckeditor/ckeditor5-core/src/command';

export default class SymbolsCommand extends Command {
  execute({ charButtons }) {
    const { model } = this.editor;

    model.change((writer) => {
      const { selection } = model.document;
      const position = writer.createPositionAt(selection.getFirstPosition());
      console.log(charButtons, 'charButtons');

      const renderChars = () => charButtons.map(({ fontFamily, char }) => {
        writer.insertText(char, { fontFamily }, position);
      });
      return renderChars();
    });
  }

  refresh() {
    this.isEnabled = true;
  }
}

我希望输出像

<span style="font-family:wingdings;">=</span>
<span style="font-family:wingdings;">?</span>
<span style="font-family:wingdings;">4</span>
<span style="font-family:symbol;">4</span>
<span style="font-family:symbol;">4</span>
...

标签： javascriptckeditorckeditor5

解决方案

加入相似<span>的 s 是 CKEditor 5 的默认行为。原因之一是这些字符也加入了数据模型并由一个文本节点表示。无论您是一个一个地插入这些字符还是一次插入所有字符，只要它们具有相同的属性，它们就会被组合在一起。

防止这种情况发生的方法之一是指定view.AttributeElement#id。不幸的是，这是一个更高级的主题。其中，您必须提供将在视图中创建实体元素的转换器。

我认为有两种方法可以实现您的目标，两种方法都需要您添加转换器而不是依赖fontFamily字体系列插件中的转换器（我假设这发生在这里）。

<span>在具有唯一 AttributeElement#id的文本上使用属性来防止加入

第一个解决方案是为文本引入一个新属性（记住扩展模式）并为其提供转换器。让我们调用属性 key symbol。

转换器必须逐个字符地转换给定的文本节点，并为每个创建的属性跨度设置唯一的id 。

这是一个更复杂的解决方案，尽管可能是一个更好的解决方案。

editor.model.conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( 'attribute:symbol', ( evt, data, conversionApi ) => {
        // Provide your converter here. It should take `data.item`, iterate
        // through it's text content (`data.item.data`), use
        // `conversionApi.writer` to create attribute elements with unique ids
        // and use the writer and `conversionApi.mapper` to place them in the view.
    } );
} );

您可以基于引擎中的转换器function wrap：downcasthelpers.jshttps: //github.com/ckeditor/ckeditor5-engine/blob/master/src/conversion/downcasthelpers.js。

插入符号作为内联元素

另一种解决方案是插入带有字符的元素，而不是简单的文本节点。

在这种情况下，您必须再次在模式中指定新的模型元素。也许扩展'$text'项目。

对于转换，您可能可以使用elementToElement来自editor.conversion.for(). 对于向下转换，您必须指定view回调并在那里设置唯一 ID（唯一 ID 可以只是一个计数器，每次加一）。如果elementToElement不适用于向下转换（它应该适用于向上转换），您将需要通过.for( 'downcast' ).add( ... ).

这个解决方案更容易，但我不确定它是否会起作用。很难说哪个更好，因为它还取决于您想要实现的目标。我可能会尝试两种方法，但我会专注于尝试使用第一种方法。

我希望目前有一种更简单的方法来实现这一点，但这种用例非常罕见，因此架构集中在另一个方向。

推荐阅读