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 following platforms:

  1. Angular
  2. React
  3. Vue.js
  4. Bootstrap
  5. dojo
  6. jQuery
  7. knockout
  8. Rails
  9. 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 npm package of tinymce by 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 into assets folder.

Step3: Coding of tinymce in project

Copy the following code of style and script link code into the head tag of 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 my code of index.html file for this step. See 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 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 index.html file.

Step 4: Run your project

Run your project and you will get output like following:

TinyMCE classic mode

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. Inline mode does not create iframe. 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 following changes:

Step 1: Replace following script tag in 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 my code of index.html file for this step. See 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 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 my code of app.component.html file for this step. See 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 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 configuration of tinyMCE as follow in 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 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 comment section.

Leave a Reply