To create content for a web you will need to have a great editor. TinyMCE that editor you are looking for. Many big companies are using TinyMCE. It has many plugins. To use it with Angular.js install tinymce npm package by running the following command.

npm install tinymce

Now go to node_modules and copy tinymce folder and paste it in your applications asset folder. In the index.html file’s head tag paste the following code.

<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>

In the app.component.html file paste the following code.

<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>

After running the project the tinymce editor will open on your screen. There are 3 modes available in TinyMCE. Classic Mode, inline Mode, and Distraction Free Mode are those three modes.