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

Question

我们正在构建一个编辑器，我们希望使用 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。

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

Answer 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或基于它的组件，而不是 Tiny MCE。