web-dev-qa-db-ja.com

tinyMCEをangular 6でapikeyなしで使用（無料）

angular 6.でtinyMCEをインストールしようとしました。 https://www.tiny.cloud/docs/integrations/angular2/ のドキュメントに従っています。

すべてOKですが、tinyMCEクラウドを使用するにはapiKeyが必要です。

「このドメインはTinyMCECloudに登録されていません。無料トライアルを開始してプレミアムクラウドサービスとプロサポートを見つけてください。」というエラーが表示されました。

ApiKeyなしでセルフホストバージョンを使用したい。

したがって、ドキュメントで説明されているように https://www.tiny.cloud/docs/integrations/angular2/#loadingtinymcebyyourself tinymce.min.jsをホストして、apiKeyを無効にすることができます。

angular 6でtinymce.min.jsを正しく追加する方法は？

angulartinymcefreeapi-key
3
Intuitisoft

1）angular 2 +：のtinymceをインストールします

tinymceをインストールangular npmモジュール

npm install @tinymce/tinymce-angular

import EditorModule onapp.module.ts

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

app.module.tsのインポートにEditorModuleを追加します

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

）HTMLファイルでtinyMCEを使用

使用するこのコードを追加します：

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

そのコンポーネントは、コンポーネントを介してTinyMCEをロードする前に、TinyMCEが利用可能である必要があるだけです。 TinyMCEが存在しない場合、コンポーネントはTinyMCEクラウドプラットフォームからTinyMCEを読み込もうとします。クラウドから取得しようとしているという事実は、TinyMCEがまだ存在していないことを示しています。

TinyMCEをロードするためのオプションがあります。

ドキュメントの先頭にあるTinyMCEタグ（簡単）

WebサーバーにTinyMCEがある場合は、スクリプトタグを使用して、index.htmlページからTinyMCEをロードできます。アプリのすべての側面は、アプリが最初に読み込まれたときに読み込まれたときにTinyMCEにアクセスできます。

必要な場合にのみモジュールローダーを介してTinyMCEをロードします（中程度の難易度）

モジュールローダーを使用して、TinyMCEを必要とするコンポーネントにTinyMCEをロードできます。理論的には、誰かが必要とする可能性がある場合にのみTinyMCEをロードしますが、このアプローチは確かにセットアップに手間がかかります。

ドキュメント： https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/

これらのどちらを使用する必要がありますか？これらはどちらも「正しい」または「間違った」アプローチではありません-どちらも実行可能であり、ニーズに応じてどちらかが可能ですうまく動作します。

1
Michael Fromin

選択した回答は、それに続いてはるかに簡略化できます ここ 。ディレクトリをハードコードしたCSSファイルを追加する代わりに、angular.jsonでこれを使用してください。

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