Question

我尝试使用angular 6安装tinyMCE。我正在关注https://www.tiny.cloud/docs/integrations/angular2/上的文档。

一切都很好，但是我必须有一个apiKey才能使用tinyMCE云。

我收到错误消息：“此域未在TinyMCE Cloud中注册。开始免费试用以发现我们的高级云服务和专业支持。”

我想使用不带apiKey的自托管版本。

因此，如文档https://www.tiny.cloud/docs/integrations/angular2/#loadingtinymcebyyourself所述，我们可以托管tinymce.min.js来禁用apiKey。

如何使用angular 6正确添加tinymce.min.js？

Answer 1

1）安装tinymce以获得Angle 2 +：

安装tinymce angular npm模块

npm install @tinymce/tinymce-angular

在 app.module.ts

上导入 EditorModule

import { EditorModule } from '@tinymce/tinymce-angular';

将 EditorModule 添加到 app.module.ts

上的导入

imports: [
...,
EditorModule
]

2）托管tinymce JS

安装tinymce npm模块：

npm install tinymce --save

angular.json

上的导入样式

"styles": [
  ...,
  "node_modules/tinymce/skins/lightgray/skin.min.css",
  "node_modules/tinymce/skins/lightgray/content.min.css",
  "node_modules/tinymce/skins/lightgray/content.inline.min.css"
]

在angular.json上导入脚本

"script": [
  ...,
  "node_modules/tinymce/tinymce.min.js",
  "node_modules/tinymce/themes/modern/theme.js"
]

3）在HTML文件上使用tinyMCE

添加此代码以使用：

<editor [(ngModel)]="dataModel"></editor>

Answer 2

选择的答案here之后可以更加简化。不用添加带有目录硬编码的CSS文件，只需在angular.json中使用它即可：

 "assets": [
   { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
 ]

Answer 3

在您尝试通过该组件加载TinyMCE之前，该组件仅需要TinyMCE可用。如果没有TinyMCE，则组件尝试从TinyMCE Cloud平台加载TinyMCE。它试图从云端获取它的事实告诉我TinyMCE还不存在。

您可以选择加载TinyMCE。

文档头中的TinyMCE标签（简单）

如果您的Web服务器上有TinyMCE，则可以使用脚本标签通过index.html页面加载TinyMCE。然后，应用首次加载时，应用的所有方面都可以访问TinyMCE

仅在需要时通过模块加载器加载TinyMCE（中等难度）

您可以使用模块加载器将TinyMCE加载到需要TinyMCE的组件中。从理论上讲，您只有在有人需要时才加载TinyMCE，但是这种方法无疑需要更多的设置工作。

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

我应该使用其中哪些？ 这两种方法都不是“正确”或“错误”的方法，它们都是可行的，并且根据您的需求，它们都可以正常工作。

在无apikey的情况下使用tinyMCE和angular 6

3 个答案: