在React中点击CKEditor 5的按钮时，设置数据。

Question

我在一个React应用中使用CKEditor 5作为文本编辑器。我在一个页面上有一个按钮，当点击它时，会在CkEditor中插入 "Button was clicked "的文字。我怎样才能实现这个功能？我知道CKEditor有setData方法，但我的按钮如何才能访问CKEditor？

我的CKEditor

<CKEditor editor={ClassicEditor} />

我的按钮

<Button onClick={this.handleClick}>Click Me</Button>

手柄点击

handleClick = e => { /* setData in the editor */ };

Answer 1

步骤1.在CkEditor中的处理点击之前，先在CkEditor中插入 "按钮被点击 "的文字。

在CkEditor声明中处理click之前，你需要处理onInit方法。

在onInit方法中，CkEditor会给你一个编辑器的实例。你需要把这个实例保存在你的本地变量中。

第二步:在handle click里面你可以使用这个方法。

 editor.model.change(writer => {
            writer.insertText("Button was clicked", editor.model.document.selection.getFirstPosition());
        });