在Draft-JS中，如何将html iframe插入到我的contentState中？

Question

我正在使用React和react-draftjs-wysiwyg / Draft JS来构建文本编辑器/ CMS。

现在我想在其中添加功能： -

1. 用户在页面上进入单独的<Input />。
2. React检测它是什么链接（YouTube，SoundCloud，Vimeo）
3. 我的函数为它创建了一个iframe
4. 草稿将其插入当前光标位置。

所有这些都完成了，除了4号。我在想，获取光标位置并将iframe HTML el推送到contentState的那一部分？但这混合了两种不同的数据类型。 iframe在html中，contentState是draft-js'对象。

另一个想法是：从anchorKey获取文本，将现有的contentState转换为HTML，找到文本，然后找到它之后的下一个空格（也许通过正则表达式）并将iframe附加到该文本。然后将整个事物转换回contentState并将其传递给EditorState prop？虽然看起来很琐事......

目前我的功能看起来像这样：

// react methods...

insertIFrameAtCursorPoint = (iframeHTMLelement) => {
    const { editorState } = this.state;
    const SelectionState = editorState.getSelection();
    let currentCursorPosition = SelectionState.getAnchorKey();

    let currentContent = editorState.getCurrentContent();
    let currentContentBlock = currentContent.getBlockForKey(currentCursorPosition);

    // change iframeHTMLelement into a block?
    // add block back to currentContent?
    // 

}

// render() {
       return (...
   }

救命？

Answer 1

decorators

在提出问题之前仔细查看官方文件，

1. 使用装饰
2. 在策略功能中，使用正则表达式查找YouTube链接或任何链接。
3. 在组件函数内部，返回带有用户输入链接的iframe组件
4. DONE