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

【问题标题】：Add React Component to TinyMCE Editor content将 React 组件添加到 TinyMCE 编辑器内容
【发布时间】：2019-05-28 15:24:42
【问题描述】：

我们正在构建一个编辑器，我们希望使用 TimyMCE 和 React。我们有一些场景，在事件中，我们必须将基于模板的内容添加到编辑器中。我打算将模板设计为 React 组件。

那么，使用 TinyMCE 和 React，我如何将 React 组件添加到 TinyMCE 编辑器。

    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.

但是如何将组件添加到编辑器？

【问题讨论】：

你搞清楚了吗？

标签： javascript reactjs tinymce

【解决方案1】：

用JSX表达式连接字符串（实际上是虚拟节点的javascript对象树）

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

导致您所描述的结果。您必须将虚拟 DOM 节点转换为 HTML，例如通过以下方式：

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

这将起作用，尽管这是将 React 组件静态渲染到 Tiny MCE 编辑器的一种方式。如果你真的想将 React 组件及其生命周期放到富文本编辑器中，请考虑使用 Draft.js 或 a component based on it 而不是 Tiny MCE。

【讨论】：