无法创建带有标题行的表,并且无法将动态数据添加到ckeditor 5和angular 9中的标题和数据单元中

问题描述 投票:0回答:1

我想在Ckeditor 5中创建一个表,该表必须包含标题行和数据行。我已经尝试使用editor.execute创建一个带有标题行的表,这还可以,但是我不知道如何以编程方式用我的数据填充标题和数据单元格。

editor.execute('insertTable', {rows: 2, columns: 4});
editor.execute('setTableRowHeader');

我还尝试了TableUtils插件,我可以创建一个表并用我的数据填充它,但是我不知道如何使用此方法将第一行作为标题。

const tableUtils = this.editor.plugins.get('TableUtils');
this.editor.model.change(writer => {
const table = tableUtils.createTable(writer, 2, result.length);

result.forEach((column, index) => {
        writer.insertText(`${column.Name}`, {bold: true}, 
        table.getChild(0).getChild(index).getChild(0), 0);
        writer.insertText(`{Tag.Embed.${column.Name}}`, 
        table.getChild(1).getChild(index).getChild(0), 0);
  });
  this.editor.model.insertContent(table);
});

是否有解决方案可解决我尝试过的上述每种方法?谢谢。

angular execute ckeditor5
1个回答
0
投票

感谢CKEditor的支持人员,我找到了答案。

const model = editor.model;

model.change( writer => {
// Create a table.
const table = tableUtils.createTable( writer, 2, 2 );
// Set it's "headingRows" attribute to 1.
writer.setAttribute( 'headingRows', 1, table );

// To simplify we'll take the first (only) data row.
const dataRow = table.getChild( 1 );

for ( const tableCell of dataRow.getChildren() ) {
    // Each created table cell have an empty paragraph as a child.
    const paragraph = tableCell.getChild( 0 );

    // Crete a content to insert - here just "foo" text.
    const text = writer.createText( 'foo' );

    // Insert text to a paragraph.
    const insertPosition = writer.createPositionAt( paragraph, 0 );
    writer.insert( text, insertPosition );
}

// Use model.insertContent() to insert a created content.
// It will insert table at a current document selection position.
model.insertContent( table );
} );
© www.soinside.com 2019 - 2024. All rights reserved.