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

Question

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

现在我想在以下位置添加功能：-

1. 用户在页面上进入单独的<Input />。

2. React检测到它是什么链接（YouTube，SoundCloud，Vimeo）

3. 我的函数为此创建了一个iframe

4. 草稿将其插入到当前光标所在的位置。

除了数字4以外，所有其他操作都已完成。我在想，获取光标位置并将iframe HTML el推入contentState的该部分？但这混合了两种不同的数据类型。 iframe是html，contentState是草稿js的对象。

另一种想法是：从anchorKey中获取文本，将现有的contentState转换为HTML，找到该文本，然后然后找到其后的下一个空格（也许通过正则表达式）并将iframe附加到那。然后将整个事情转换回contentState并将其传递给EditorState属性？似乎很可怜...

此刻我的功能如下：

// 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. 完成