Angular6 和 tinyMCE 编辑器

Question

Hello I would like to integrate tinyMCE editor in angular 6 application.

I have integrated as below thread, however it gives me message that the domain is not registered.I would like to do it without integrating it with API keys with few basic features.

Link here to stackoverflow a In above thread it says it can be done using module Loader but I think it is given in AngularJS and not in angular6.

If someone can help me with the same would be highly appreciable.

Answer 1

Following step by step guide outlines the process of loading TinyMCE and TinyMCE-Angular in your project managed by the Angular CLI.

Install TinyMCE using NPM

npm install --save tinymce

In your angular.json add tinymce to the global scripts tag. Your script list might look like the following:

"scripts": [
  "node_modules/tinymce/tinymce.min.js"
]

Add tinymce skins, themes and plugins to the assets property of your angular.json. This will allow Tiny to lazy-load everything it requires on initialization.

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

Finally, configure the editor. If necessary, set the base_url and suffix options.

<editor [init]="{
  base_url: '/tinymce', // Root for resources
  suffix: '.min',       // Suffix to use when loading resources
  plugins: 'lists advlist',
  toolbar: 'undo redo | bold italic | bullist numlist outdent indent'
}"></editor>

More info here: https://github.com/tinymce/tinymce-angular