Warm tip: This article is reproduced from serverfault.com, please click

reactjs-如何在CKEdit 5 React组件中管理粘贴事件?

(reactjs - How to mange a paste event within CKEdit 5 React component?)

发布于 2020-12-12 09:57:57

当你使用CKEditor时,用户可能会感到前卫并一次粘贴数千行。浏览器不会这样。一种策略是拦截粘贴事件并将数据修整为更易于管理的块。环顾四周,我发现了这个问题-这基本上是相同的情况,我只知道如何使用React组件实现相同的目标。我还要感谢其他不同且更具洞察力的策略。

Questioner
johnniepop
Viewed
0
johnniepop 2021-01-05 07:09:43

简而言之,我直接在开发人员的github问题跟踪器中提出了一个问题在Javascript控制台中出现了很多错误和错误,以及最终的答案,我设法通过粘贴事件控制了CKEditor中的文本。

关键点:

  • 我使用了init道具。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)
        }}
     />

就是这样了。我希望这可以缩短其他人的工作时间。