TinyMCE Editor in Angular integration

In this article, we learn how to integrate TinyMCE Editor angular application. For integration, we used their official angular module “@tinymce/tinymce-angular” npm package in our application.
TinyMCE Editor: Editor will usually come with some basic features:

  • A box you can type your content in
  • Text styles
  • Font options
  • Bold, italics, and underline
  • Bullet points and numbered lists
  • Alignment
  • Hyperlinks
  • Text color and highlighting

Let’s create a new project for TinyMCE Editor in angular for that you need to run the following command to create a project.


ng new tinymce-demo

“tinymce-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd tinymce-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the @tinymce/tinymce-angular npm package in our application. run below command to install.


 npm install --save @tinymce/tinymce-angular

After we need to import and register EditorModule in the main app module class.app.module.ts file. Display in below code


....
 import { EditorModule } from '@tinymce/tinymce-angular';
.....
@NgModule({
......
imports: [
   .......
    EditorModule
  ],
.......
})
......

After adding “EditorModule” we can use it in our component easily. For a basic example add the below code in the “app.component.html”


 <h1>TinyMCE 5 Angular Demo</h1>
 <editor
   [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>

Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.
To register for a Tiny Cloud API key, visit the sign-up page


<editor
  apiKey="your-api-key"
></editor>



Display below code we can add formControlName directive to the editor configuration.


 <editor [formControlName]="user.form" [init]="{plugins: 'link'}"></editor>

Below is the full TinyMCE Editor. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  • 2
  •  
  •