以编程方式在 CKEditor 5 中插入块引号和新行

Question

我已经成功地为 ckeditor 5 创建了一个插件，它允许用户从一个页面 select 一个或多个以前的帖子，并在点击 "apply quotes" 按钮后，它会插入 select编辑器中的 ed 帖子作为块引号一个接一个地查看。

这很好用，但是，我想让光标在最后一个块引用之后换行，以便用户可以添加自己的评论。

我曾尝试在引用列表中添加一个段落标记，但这在最后一个引用中显示为一个新段落，而不是在它之后。

有人对此有解决方案吗？

Answer 1

我写了一个简单的函数，它向编辑器添加了引用的文本和用户回复的段落。

/**
 * @param {String} author An author of the message.
 * @param {String} message A message that will be quoted.
 */
function replyTo( author, message ) {
    // window.editor must be an instance of the editor.
    editor.model.change( writer => {
        const root = editor.model.document.getRoot();
        const blockQuote = writer.createElement( 'blockQuote' );
        const authorParagraph = writer.createElement( 'paragraph' );
        const messageParagraph = writer.createElement( 'paragraph' );

        // Inserts: "Author wrote:" as bold and italic text.
        writer.insertText( `${ author } wrote:`, { bold: true, italic: true }, authorParagraph );

        // Inserts the message.
        writer.insertText( message, messageParagraph );

        // Appends "Author wrote" and the message to block quote.
        writer.append( authorParagraph, blockQuote );
        writer.append( messageParagraph, blockQuote );

        // A paragraph that allows typing below the block quote.
        const replyParagraph = writer.createElement( 'paragraph' );

        // Appends the block quote to editor.
        writer.append( blockQuote, root );

        // Appends the reply paragraph below the block quote.
        writer.append( replyParagraph, root );

        // Removes the initial paragraph from the editor.
        writer.remove( root.getChild( 0 ) );

        // And place selection inside the paragraph.
        writer.setSelection( replyParagraph, 'in' );
    } );

    editor.editing.view.focus();
}

如果您对如何根据您的代码进行调整有疑问，我想看看您编写的代码。它会让你理解你做了什么。

当然，你可以看到建议的代码作为在线演示 – https://jsfiddle.net/pomek/s2yjug64/

以编程方式在 CKEditor 5 中插入块引号和新行

Programmatically inserting a blockquote followed by a new line in CKEditor 5

ckeditor

ckeditor5