The Official TinyMCE Angular component integrates TinyMCE into Angular projects. This procedure creates a basic Angular application containing a TinyMCE editor based on our Basic TinyMCE example.
For examples of the TinyMCE Angular integration, visit the tinymce-angular storybook.
This procedure requires:
$ npm install -g @angular/cli
$ ng new --defaults --skip-git tinymce-angular-demo
$ cd tinymce-angular-demo
$ npm install --save @tinymce/tinymce-angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
EditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<h1>TinyMCE 5 Angular Demo</h1>
<editor
initialValue="<p>This is the initial content of the editor</p>"
[init]="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"
>
</editor>
This TinyMCE editor configuration should replicate the example on the Basic example page.
Include the apiKey option in the editor element and include your TinyMCE API key.
Such as:
<Editor apiKey="your-api-key" [init]={ /* your other settings */ } />
TinyMCE can be self-hosted by: including TinyMCE within the application, deploying TinyMCE independent of the Angular application, or bundling TinyMCE with the Angular application.
To load TinyMCE and TinyMCE-Angular in a project managed by the Angular CLI Tool:
$ npm install --save tinymce
For example:
"scripts": [
"node_modules/tinymce/tinymce.min.js"
]
"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/" }
]
<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>
To use an independent deployment of TinyMCE, add a script to either the
or the end of the of the HTML file, such as:<script src="https://github.com/marcialwushu/Ionic4TinyMCE/raw/master/path/to/tinymce.min.js"></script>
To use an independent deployment of TinyMCE with the create a Angular application, add the script to /path/to/tinymce-angular-demo/src/app/app.component.html.
For information on self-hosting TinyMCE, see: Advanced installation choices.
To bundle TinyMCE using a module loader (such as Webpack and Browserify), see: Usage with module loaders.
$ ng serve --open