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>)

这将起作用，尽管这是将静态组件静态呈现到Tiny MCE编辑器的一种方法。如果您真的想将React组件及其生命周期放置到RTF编辑器中，请考虑使用Draft.js或a component based on it代替Tiny MCE。

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

1 个答案: