[英]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>
是CKEditor 5的默认行为。 原因之一是这些字符也加入了数据模型,并由一个文本节点表示。 如果这些字符具有相同的属性,则可以将它们一次或全部一次插入,也没关系。
防止发生这种情况的方法之一是指定view.AttributeElement#id 。 不幸的是,这是一个更高级的主题。 其中,您将不得不提供将在视图中创建属性元素的转换器。
我认为有两种方法可以实现您的目标,这两种方法都需要您添加一个转换器,而不是依赖字体家族插件的fontFamily
转换器(我认为这是在这里发生的)。
<span>
第一个解决方案是为文本引入一个新属性(记住有关扩展模式 )并为其提供转换器。 让我们称之为属性键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.
} );
} );
您可以将转换器基于引擎中downcasthelpers.js
function wrap
: https : //github.com/ckeditor/ckeditor5-engine/blob/master/src/conversion/downcasthelpers.js 。
另一种解决方案是插入带有字符的元素,而不是简单的文本节点。
同样,在这种情况下,您必须在架构中指定新的模型元素。 也许扩展'$text'
项。
为了进行转换,您可以使用editor.conversion.for()
elementToElement
帮助器。 对于下垂,您必须将view
指定为回调并在其中设置唯一ID(唯一ID可以只是一个计数器,每次增加一个)。 如果elementToElement
不适用于向下转换(应该适用于向上转换),则需要通过.for( 'downcast' ).add( ... )
提供一个自定义转换器。
这个解决方案比较容易,但是我不确定它是否有效。 很难说哪个更好,因为这还取决于您要实现的目标。 我可能会尝试两者,但我会专注于尝试使用第一种方法来实现。
我希望目前有一种更简单的方法可以实现此目的,但是这种用例很少见,因此体系结构集中在另一个方向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.