将React组件添加到TinyMCE编辑器内容

Question

我们正在构建一个编辑器，并希望使用TinyMCE和React。我们有一些场景需要在事件发生时将基于模板的内容添加到编辑器中。我计划将模板设计为React组件。

那么，如何在TinyMCE编辑器中添加React组件呢？请提供相应的方法。

    export class AppEditor extends React.Component<iEditorProps, iEditorState> {

    innerEditor: React.RefObject<Editor>;

    constructor(props: iEditorProps) {
        super(props);
        this.state = {
            content: ''            
        };
        this.innerEditor = React.createRef();
    }


    handleChange = (content) => {
        this.setState({ content });
    }

    handleAddContent = (e) => {
        this.setState(prevState => {
            return { content: prevState.content + <TemplateComp>Added Content</TemplateComp> }
        });
    }

    render() {
        return (
            <div>
                <Editor ref={this.innerEditor} inline onEditorChange={this.handleChange} value={this.state.content} />
            </div>);
    }
}

在上面的代码中，在 "handleAddContent"处，我试图向编辑器添加 <TemplateComp>，但它被渲染为 [object] [Object]。我明白字符串连接会导致这种情况。正在使用 TinyMCE 包 - https://github.com/tinymce/tinymce-react。

但是我该如何将组件添加到编辑器中呢？

- SridharVenkat

---

你解决了吗？ - lukas

Answer 1

最初的回答：在 JSX 表达式中连接字符串（实际上是虚拟节点的 JavaScript 对象树）。

prevState.content + <TemplateComp>Added Content</TemplateComp>

您所描述的结果是这样的。您需要将虚拟DOM节点转换为HTML，例如以下方式：

将虚拟节点转换为HTML：

prevState.content + ReactDOMServer.renderToStaticMarkup(<TemplateComp>Added Content</TemplateComp>)

这将可行，虽然这是一种将React组件静态呈现到Tiny MCE编辑器的单向路线。如果您真的想将带有其生命周期的React组件放置到富文本编辑器中，请考虑使用基于Draft.js或基于该库构建的组件而不是Tiny MCE。最初的回答。

- Marek Gregor