在React中没有云的情况下加载TinyMCE

时间:2019-03-16 01:39:58

标签: reactjs npm tinymce

我正在研究使用TinyMCE作为富文本编辑器的React项目。我想退出他们的云服务,以便删除以下消息。

  

此域未在TinyMCE Cloud中注册。开始免费试用,以发现我们的高级云服务和专业支持。

我从TinyMCE网站上尝试了this link (Loading TinyMCE by yourself),方法是将以下代码添加到我的index.html文件中,希望它可以在全球范围内访问。

<script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>

尽管如此,这还是行不通的。我在这里想念什么吗?

2 个答案:

答案 0 :(得分:0)

您的script标记中的URL正在使用我们的Cloud服务来尝试加载编辑器,因此,如果您不想使用我们的Cloud平台,则该URL似乎不是您想要的。

如果要在React应用程序中本地托管TinyMCE,可以通过此处概述的模块加载器来实现:

https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/

如果您想使用问题中引用的脚本标签,则需要在我们的Cloud平台上注册(免费)以获得API密钥。有了后,您需要按照以下概述将API密钥包含在脚本标记中:

https://www.tiny.cloud/docs/cloud-deployment-guide/editor-and-features/

...所以脚本标签看起来像这样:

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>

...但是将字符串your_API_key替换为您的实际API密钥。

答案 1 :(得分:0)

使用官方的tinymce react软件包时,我有了摆脱云的新方法。

  1. 转到https://github.com/tinymce/tinymce-react,然后克隆整个项目。
  2. 打开文件src / main / ts / components / Editor.tsx,然后转到第122行,在其中可以找到名为“ getScriptSrc”的函数。
  3. 删除该函数中的所有代码,仅返回您自己托管的tinymce.min.js的url。这样,您可以使官方的tinymce做出反应,但不会被消息打扰。
  4. 在src / main / ts / index.ts中导入导入编辑器。