如何使用本地 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-react 包装器的自述文件：

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

Loading TinyMCE by yourself

To opt out of using TinyMCE cloud you have to make TinyMCE globally available yourself. This can be done either by hosting the tinymce.min.js file by youself and adding a script tag to you HTML or, if you are using a module loader, installing TinyMCE with npm. For info on how to get TinyMCE working with module loaders check out this page in the documentation.

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

Answer 2

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

import 'tinymce/tinymce';

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

我发现 this post 有用。

Answer 3

我正在使用 Create React App，我尝试了很多东西，包括 TinyMCE 网站上的说明。在我找到 Derek Morrison 上面引用的 this blog post 之前，对我没有任何帮助。

除了导入 React Editor 组件外，我还必须添加这些 tinymce 导入：

import 'tinymce/tinymce';
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/table';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/ui/oxide/content.min.css';
import 'tinymce/skins/content/default/content.min.css';
import { Editor } from '@tinymce/tinymce-react';

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

How to load tinymce editor in React using local tinymce js

tinymce

editor

reactjs