How to install TinyMCE in Angular

To create build beautiful content for the web it is always nice to have a great editor. You can do that with the help of the TinyMCE editor. TinyMCE is a rich text editing platform that helped launch Atlassian, Medium, Evernote, and more. TinyMCE is extendable with 50+ powerful plugins and can be easily customized.
TinyMCE is used by many companies like IBM, D2L, ServiceNow, Adobe, El Roboto, THOMSON REUTERS, RGP, and many more.
In this tutorial, you will learn how to use TinyMCE angular.

TinyMCE can be integrated with the following platforms:

Angular
React
Vue.js
Bootstrap
dojo
jQuery
knockout
Rails
Contentful

In this tutorial, you will learn how to use TinyMCE in angular. You can use TinyMCE in many ways but in this tutorial, you will learn how to use TinyMCE by self-hosting.

Step 1: Install tinymce npm package

Firstly, install the npm package of TinyMCE by the following command:

npm install tinymce

Step2: Copying necessary files of tinymce into assets folder

Go to node_modules folders and copy tinymce folder and paste it into the assets folder.

Step3: Coding of tinymce in project

Copy the following code of style and script link code into the head tag of the index.html file.
*Note: I have added an additional script that initiates the tinymce.

<link rel="stylesheet" href="./assets/tinymce/skins/ui/oxide/skin.min.css">
  <script src="./assets/tinymce/tinymce.min.js"></script>
  <script type="text/javascript">
    tinymce.init({
      selector: '#tinymceTextarea',
    });
  </script>

You can refer to my code of index.html file for this step. See the following code.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TinymceInAngular</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="./assets/tinymce/skins/ui/oxide/skin.min.css">
    <script src="./assets/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
      tinymce.init({
        selector: '#tinymceTextarea'
      });
    </script>
  </head>

  <body>
    <app-root></app-root>
  </body>
</html>

Put the following code into the app.component.html file.

<div style="text-align:center;">
  <img width="50" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <h1>
    TinyMCE in angular
  </h1>
</div>

<textarea name="" id="tinymceTextarea" cols="30" rows="10"></textarea>

<router-outlet></router-outlet>

*Note: Notice that to enable tinymce for the element we have to give id to that element and that id should be placed as a selector. Here, I have placed “tinymceTextarea” as id to textarea tag and that “tinymceTextarea” is given as a selector when I’m initiating the tinymce from the index.html file.

Step 4: Run your project

Run your project and you will get output like the following:

TinyMCE editor modes:

TinyMCE offers three modes by which you can load or initiate the TinyMCE editor. They are Classic Mode, Inline Mode, and Distraction-Free Mode.
Below you will find information and demos about modes in tinymce angular.

1) Classic Mode

The classic mode adds an iframe on the page, which contains the content and styles used in the content area. Classic Mode is enabled by default.

2) Inline Mode

In Inline mode, the editor is run on the selected HTML element. The inline mode does not create an iframe. The inline mode only works on content within a block element (such as div or h1). To enable inline mode, set the inline option to true.

To implement inline mode, make the following changes:

Step 1: Replace the following script tag in the place where you initiated tinyMCE. I have made one change in this script tag. I have set configuration in which I have set inline: ‘true’ property.

<script type="text/javascript">
    tinymce.init({
      selector: '#tinymceTextarea',
      inline: 'true'
    });
</script>

You can refer to my code of index.html file for this step. See the following code.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TinymceInAngular</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="./assets/tinymce/skins/ui/oxide/skin.min.css">
    <script src="./assets/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
      tinymce.init({
        selector: '#tinymceTextarea',
        inline: 'true'
      });
    </script>
  </head>

  <body>
    <app-root></app-root>
  </body>
</html>

Step 2: Replace textarea tag with the following div tag. I have made these changes because inline mode only works on content within a block element (such as div or h1).

<div style="min-height:150px; border: 1px dashed grey;" id="tinymceTextarea" cols="30" rows="20"></div>

You can refer to my code of the app.component.html file for this step. See the following code.

<div style="text-align:center;">
  <img width="100" alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <h1>
    TinyMCE in angular
  </h1>
</div>

<div style="min-height:150px; border: 1px dashed grey;" id="tinymceTextarea" cols="30" rows="20"></div>

<router-outlet></router-outlet>

*Note: TinyMCE in inline mode will not initialize on the following elements: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param, embed, source, wbr, track, colgroup, option, table, tbody, tfoot, thead, tr, th, td, script, noscript, style, textarea, video, audio, iframe, object, and menu.

Step 3: Run the project and you will see output like the following.

3) Distraction Free Mode

The distraction-free mode is an inline editor that has an additional configuration to provide greater functionality.

Step 1: To enable distraction-free mode set the configuration of tinyMCE as follows in the index.html file.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TinymceInAngular</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="./assets/tinymce/skins/ui/oxide/skin.min.css">
    <script src="./assets/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
      tinymce.init({
        selector: '#tinymceTextarea',
        plugins: ['quickbars'],
        toolbar: false,
        menubar: false,
        inline: true
      });
    </script>
  </head>

  <body>
    <app-root></app-root>
  </body>
</html>

Step 2: Run your project and you will see output like the following.

Conclusion:

In this tutorial, you learned how to use tinymce angular. You learned the modes of tinymce. If you face any problems ask me through the comment section.