使用tinyMCE和Angular 6，无需apikey（免费）

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) 为 Angular 2+ 安装tinymce :

安装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

选择的答案可以在这里之后变得更加简化。无需添加硬编码的 CSS 文件及其目录，只需在

angular.json

中使用即可：

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

Answer 3

在您尝试通过该组件加载 TinyMCE 之前，该组件只需要可用的 TinyMCE。 如果 TinyMCE 不存在，该组件会尝试从 TinyMCE 云平台加载 TinyMCE。 事实上，它试图从云端获取它，这告诉我 TinyMCE 还不在那里。

您可以选择加载 TinyMCE。

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

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

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

您可以使用模块加载器在需要TinyMCE的组件中加载TinyMCE。 理论上，您仅在有人需要时才加载 TinyMCE，但这种方法的设置工作肯定更多。

文档：

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

我应该使用哪一个？ 这两种方法都不是“正确”或“错误”的方法 - 它们都是可行的，并且根据您的需求，任何一种都可以很好地工作。

Answer 4

对我来说，它适用于自托管的tinyMCE 7和anglar 15，遵循官方说明：

https://www.tiny.cloud/docs/tinymce/latest/angular-pm/

+

npm i tinymce

我们想要延迟加载它，并且最重要的是我们的编辑器仅在管理模块中使用。在这种情况下，请注意

import {TINYMCE_SCRIPT_SRC} from "@tinymce/tinymce-angular";

@NgModule({

// ... 

  providers: [ 
    // ...
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' },
  ]

})

必须位于根目录中app.module.ts

，即使编辑器仅在不同的模块中使用。