How To Integrate Tiny.MCE with Ionic 5 – Angular

Let’s see how we can integrate the TinyMCE Editor with Ionic 5 (Angular). Before we are going further, let’s see what’s TinyMCE editor.  TinyMCE is the most advanced WYSIWYG HTML editor designed to simplify website content creation. TinyMCE is open-source software under the LGPL. WYSIWYG An acronym for What You See Is What You Get, In which editing software allows creating contents in a form that resembles its appearance when displayed as a finished product. Here in our case, we are using the web; it generates HTML and CSS styles behind the scenes.

here we divide this guide into four parts

1. Create a blank ionic project using ionic CLI.
2. Integrate TinyMCE into Ionic Project.
3. Configuring TinyMCE for Ionic.
4. Adding TinyMCE to Ionic page
5. Testing TinyMCE in Ionic Project.

1. Create a blank ionic project using ionic CLI.

First of all, we are creating a blank new ionic project using Ionic CLI.

 ionic start TinyMCE

The Ionic CLI will prompt us to select the JavaScript framework we use for this app. as we are using angular, choose the option Angular to continue. Again Ionic CLI prompts us to pick the template for this app. we are using the blank template. If you want to integrate the capacitor, you can do it during the setup process.

Go to the newly created project by using.

 cd .\TinyMCE

2. Integrate TinyMCE into Ionic Project.

To add the TinyMCE, we need to install the tinymce-angular package and save it to your package.json with –save.

npm install --save @tinymce/tinymce-angular

To include the TinyMCE within the application, we need to install the tinymce-angular package and save it to your package.json with –save.

npm install --save tinymce

3. Configuring TinyMCE for Ionic.

Open the open angular.json using a text editor and add TinyMCE to the assets property.

   "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              { 
                "glob": "**/*", 
                "input": "node_modules/tinymce", 
                "output": "/tinymce/" 
              }
            ],

Also, add the following inside angular.json under scripts

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

to work TinyMCE properly, we need to copy the icons, plugins, skins, and themes folders from node_modules to src/assets/tinymce.

4. Adding TinyMCE to Ionic page

We can add TinyMCE editor to an Ionic page in two ways one is using the TinyMCE editor and the second one converting the <textarea></textarea> to a TinyMCE Editor.

a. Using the TinyMCE Editor

Import the ‘EditorModule’ in the Ionic page module,

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { EditorModule } from '@tinymce/tinymce-angular';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    EditorModule
  ],
  declarations: [HomePage],
})
export class HomePageModule {}

Open the typescript file and add the TinyMCE configuration

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
  tinyMCEConfiguration;
  constructor() {
    this.tinyMCEConfiguration ={
      base_url: '/tinymce', 
      suffix: '.min'       
    }
  }
  ngOnInit() {
    
  }
}

use the editor in page’s HTML page and initiate it

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      TinyMCE
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <editor
    [init]="tinyMCEConfiguration"
  ></editor>
</ion-content>

5. Testing TinyMCE in Ionic Project.

To test the app, run the ionic serve in your command prompt inside the project folder.

ionic serve