Integrating Open Source TinyMCE into Angular

Raj Lomror — Wed, 27 Mar 2024 04:18:42 +0000

TinyMCE is a powerful rich-text editor that facilitates the creation and editing of formatted content within a user-friendly interface. It's an invaluable tool for building blogs, content management systems, and various web applications that require text editing capabilities. In this guide, we'll explore how to integrate the Open Source version of TinyMCE into Angular applications using the TinyMCE package approach.

Getting Started

First, let's install the required packages: tinymce and tinymce-angular.

npm install --save tinymce @tinymce/tinymce-angular

Next, import the EditorModule into your Angular module (app.module.ts).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, EditorModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Note: If your Angular application has child or other modules, import the EditorModule accordingly.

Integrating the Editor

Now, let's add the TinyMCE editor component to your HTML file (tinymce.component.html).

<h1>TinyMCE Angular Editor</h1>
<editor [init]="{
  height: 450,
  width: 780,
  branding: false,
  plugins: [
    // Add your plugins here
  ],
  toolbar: 'undo redo | formatselect fontselect fontsizeselect | forecolor backcolor | link | print',
  menubar: 'edit view insert format tools table',
  deprecation_warnings: false
}" [(ngModel)]="enhancedText">
</editor>

Configuration

To ensure proper resource loading, update your angular.json file to include TinyMCE in the assets property.

"assets": [
  { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
]

For lazy loading, provide a dependency provider to the module using the TINYMCE_SCRIPT_SRC token.

import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
/* ... */
@NgModule({
  /* ... */
  imports: [EditorModule],
  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]
})

To load TinyMCE when the page or application is loaded:

Add TinyMCE to the global scripts tag in your angular.json.

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

Update the editor configuration to include the base_url and suffix options.

   <editor [init]="{
     height: 450,
     width: 780,
     branding: false,
     base_url: '/tinymce', // Root for resources
     suffix: '.min', // Suffix to use when loading resources
     plugins: [
       'advlist autolink link lists charmap print preview anchor textcolor',
       'searchreplace wordcount visualblocks visualchars code fullscreen fullpage insertdatetime nonbreaking',
       'table template paste help',
     ],
     toolbar1: 'undo redo | formatselect fontselect fontsizeselect | forecolor backcolor | link | print',
     toolbar2: 'cut copy paste pastetext | bold italic underline strikethrough superscript subscript | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | blockquote | removeformat',
     menubar: 'edit view insert format tools table',
     deprecation_warnings: false
   }" [(ngModel)]="inputHtmlText">
   </editor>

Note: Update the base_url path if file loading errors occur.

Troubleshooting

While integrating the TinyMCE package, you may encounter CSS and other file not found errors. These errors could be due to the base_url. If such errors occur, open the error URL in your browser and check the file paths. Update the base_url as required.

Failed to load resource: the server responded with a status of 404 (Not Found)
skin.min.css

Additional Resources

For more detailed information and advanced usage, refer to the official TinyMCE documentation.

Conclusion

Integrating TinyMCE into your Angular applications opens up a world of possibilities for content creation and editing. By following these steps, you can harness the full power of TinyMCE in your projects. If you encounter any issues or have questions, don't hesitate to reach out to the community for support.

Happy coding!