如何使用本地 tinymce js 在 React 中加载 tinymce 编辑器

Question

我正在尝试在我的 React 应用程序中实现 tinymce 编辑器。但是它从tinymce cloud调用js。我希望它在本地工作。我浏览了用于本地托管 js 的 tinymce 文档，但无法实现它。有人可以帮我这样做吗。

提前致谢。

import { Editor } from '@tinymce/tinymce-react';

.....

<Editor
                        style={{margin: "0px !important"}}
                        init={{
                        plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
                        toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
                        height: 500
                        }}
                        initialValue={this.state.htmlContent}
                        onChange={this.handleEditorChange}
                    />                   

Answer 1

我遇到了同样的问题，看来你需要像这样导入 TinyMCE 来初始化它：

import 'tinymce/tinymce';

然后，您可以将该<Editor>组件与本地托管的 TinyMCE 安装一起使用。您还需要根据需要导入图标、主题、插件、皮肤。

我发现这篇文章很有帮助。

Answer 2

请参阅tinymce-react包装器的自述文件：

https://github.com/tinymce/tinymce-react

自行加载TinyMCE

要选择不使用 TinyMCE 云，您必须自行使 TinyMCE 在全球范围内可用。这可以通过自己托管tinymce.min.js文件并向HTML添加脚本标签来完成，或者如果您使用模块加载器，则使用npm安装TinyMCE。有关如何让 TinyMCE 与模块加载器一起使用的信息，请查看文档中的此页面。

您通过导入加载的只是帮助 TinyMCE 在 React 中运行的包装器。您尚未加载 TinyMCE 本身。如果在加载 React 组件之前加载 TinyMCE，包装器将不会尝试从 TinyMCE Cloud 加载 TinyMCE。