如何使每个元素分开
How to make separate each element
如何让每个元素分开。目前,每个元素合并为一个 <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>
...
加入相似的 <span>
s 是 CKEditor 5 的默认行为。原因之一是这些字符也加入了数据模型并由一个文本节点表示。将这些字符一个一个插入还是一次全部插入都没有关系,如果它们具有相同的属性,它们将组合在一起。
防止这种情况发生的方法之一是指定 view.AttributeElement#id。不幸的是,这是一个更高级的主题。其中,您将必须提供将在视图中创建属性元素的转换器。
我认为有两种方法可以实现您的目标,这两种方法都需要您添加一个转换器而不是依赖 fontFamily
来自字体系列插件的转换器(我假设这会发生在这里)。
在具有唯一 AttributeElement#id 的文本上使用属性以防止加入 <span>
s
第一个解决方案是为文本引入一个新属性(记得扩展schema)并为其提供转换器。让我们调用属性键 symbol
.
转换器必须逐个字符地转换给定的文本节点,并且 set unique 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.
} );
} );
您可以将转换器基于引擎中 downcasthelpers.js
的 function wrap
:https://github.com/ckeditor/ckeditor5-engine/blob/master/src/conversion/downcasthelpers.js.
将符号作为行内元素插入
另一个解决方案是插入带有字符的元素,而不是简单的文本节点。
在这种情况下,您必须再次在架构中指定新的模型元素。也许扩展 '$text'
项。
对于转换,您可能会使用 editor.conversion.for()
中的 elementToElement
个助手。对于沮丧,您必须将 view
指定为回调并在那里设置唯一 ID(唯一 ID 可以只是一个计数器,每次递增 1)。如果 elementToElement
不适用于向下转换(它应该适用于向上转换),您将需要通过 .for( 'downcast' ).add( ... )
.
提供自定义转换器
这个解决方案更简单,但我不确定它是否有效。很难说哪个更好,因为它还取决于您想要实现的目标。我可能会尝试两种方法,但我会专注于尝试使用第一种方法。
我希望目前有一种更简单的方法来实现这一点,但这种用例非常少见,因此架构专注于另一个方向。
如何让每个元素分开。目前,每个元素合并为一个 <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>
...
加入相似的 <span>
s 是 CKEditor 5 的默认行为。原因之一是这些字符也加入了数据模型并由一个文本节点表示。将这些字符一个一个插入还是一次全部插入都没有关系,如果它们具有相同的属性,它们将组合在一起。
防止这种情况发生的方法之一是指定 view.AttributeElement#id。不幸的是,这是一个更高级的主题。其中,您将必须提供将在视图中创建属性元素的转换器。
我认为有两种方法可以实现您的目标,这两种方法都需要您添加一个转换器而不是依赖 fontFamily
来自字体系列插件的转换器(我假设这会发生在这里)。
在具有唯一 AttributeElement#id 的文本上使用属性以防止加入 <span>
s
第一个解决方案是为文本引入一个新属性(记得扩展schema)并为其提供转换器。让我们调用属性键 symbol
.
转换器必须逐个字符地转换给定的文本节点,并且 set unique 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.
} );
} );
您可以将转换器基于引擎中 downcasthelpers.js
的 function wrap
:https://github.com/ckeditor/ckeditor5-engine/blob/master/src/conversion/downcasthelpers.js.
将符号作为行内元素插入
另一个解决方案是插入带有字符的元素,而不是简单的文本节点。
在这种情况下,您必须再次在架构中指定新的模型元素。也许扩展 '$text'
项。
对于转换,您可能会使用 editor.conversion.for()
中的 elementToElement
个助手。对于沮丧,您必须将 view
指定为回调并在那里设置唯一 ID(唯一 ID 可以只是一个计数器,每次递增 1)。如果 elementToElement
不适用于向下转换(它应该适用于向上转换),您将需要通过 .for( 'downcast' ).add( ... )
.
这个解决方案更简单,但我不确定它是否有效。很难说哪个更好,因为它还取决于您想要实现的目标。我可能会尝试两种方法,但我会专注于尝试使用第一种方法。
我希望目前有一种更简单的方法来实现这一点,但这种用例非常少见,因此架构专注于另一个方向。