angular - 在没有 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/#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 上

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

添加 编辑器模块 在 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>