在无apikey的情况下使用带有angular 6的tinyMCE（免费）

Question

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

一切正常，但我必须具有apiKey才能使用tinyMCE云。

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

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

因此，如文档https://www.tiny.cloud/docs/integrations/angular2/#loadingtinymceby自己所解释的那样，我们可以托管tinymce.min.js以禁用apiKey。

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

Answer 1

1）安装tinymce角2+：

安装tinymce angular npm模块

npm install @tinymce/tinymce-angular

进口EditorModule上app.module.ts

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/" }
 ]