Question

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

谢谢。

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';

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

我发现 this 的帖子很有帮助。

Answer 2

请参阅tinymce反应包装的自述文件：

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

自己加载TinyMCE

要退出使用TinyMCE云，您必须   使TinyMCE可以在全球范围内使用。这可以做到   通过自己托管tinymce.min.js文件并添加脚本标签   到您的HTML，或者，如果您使用的是模块加载器，则安装TinyMCE   与npm。有关如何使TinyMCE与模块加载器一起工作的信息   在文档中查看此页面。

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

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

2 个答案: