【问题标题】:Programmatically inserting a blockquote followed by a new line in CKEditor 5在 CKEditor 5 中以编程方式插入块引用,后跟新行
【发布时间】:2018-12-27 15:49:53
【问题描述】:

我已经成功地为 ckeditor 5 创建了一个插件,它允许用户从一个页面中选择一个或多个以前的帖子,然后单击“应用引号”按钮,它将选定的帖子一个接一个地插入到编辑器视图中块引用。

这很好用,但是,我想让光标在最后一个块引用之后的新行上,以便用户可以添加自己的 cmets。

我尝试在引号列表中附加一个段落标签,但这在最后一个引号内显示​​为一个新段落,而不是在它之后。

有没有人可以解决这个问题?

【问题讨论】:

  • 我完全修改了我之前的回复,因为我不明白你想要实现什么。很抱歉造成混乱。

标签: ckeditor ckeditor5


【解决方案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/

【讨论】:

  • 问题是关于在块引用之后设置选择。您的答案显示了如何在块引用中设置它。
猜你喜欢
  • 2018-05-16
  • 2013-10-09
  • 2018-05-15
  • 1970-01-01
  • 2014-03-03
  • 1970-01-01
  • 2021-11-14
  • 1970-01-01
  • 2011-02-16
相关资源
最近更新 更多