如何在 CKEditor 5 React 组件中管理粘贴事件？

Question

当您使用 CKEditor 时，用户可能会尝试急躁并一次粘贴数千行。浏览器不会喜欢那样。一种策略是拦截粘贴事件和 trim 数据到更易于管理的块。环顾四周，我发现 this question - 这基本上是相同的情况，我只是不知道如何使用 React 组件实现相同的效果。我也很欣赏不同的和更有洞察力的策略。

Answer 1

简而言之，我 posed a question 直接在开发人员的 github 问题跟踪器中。在 Javascript 控制台和他们的最终答案中有很多线索和错误，我设法通过粘贴事件控制进入 CKEditor 的文本。

要点：

我使用了 onInit 道具。 onReady 对我不起作用。
粘贴事件中的数据被分成元素（如 html 个元素）并且访问有点奇怪。

我想解释我所做的事情的最好方法是只显示代码，所以：

<CKEditor
    id={id}
    editor={ClassicEditor}
    data={value}
    onInit={editor => {
        const documentView = editor.editing.view.document
        documentView.on('paste', (event, data) => {
            editor.plugins.get('Clipboard').on('inputTransformation', (event, data) => {
                let accumulated = editor.getData()
                for (const element of data.content.getChildren()) {
                    if (element._textData !== undefined) {
                       accumulated += element._textData
                    } else {
                       accumulated += element.getChild(0)._textData
                    }
                    if (accumulated.length >= SOME_LENGTH) {
                       event.stop()
                       editor.setData('')
                       editor.setData(accumulated.slice(0, SOME_LENGTH))
                       break
                    }
                 }
              })
           })
        }}
        onChange={(event, editor) => {
           const data = editor.getData()
           inputOnChange(data)
        }}
     />

就是这样。我希望这可以缩短其他人的挣扎时间。

如何在 CKEditor 5 React 组件中管理粘贴事件？

How to mange a paste event within CKEdit 5 React component?

reactjs

events

ckeditor

paste