Integrating Open Source TinyMCE into Angular
Tags: tinymce, angular, opensource, javascript
Published: 2024-03-27 04:18:42

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

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

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

```typescript
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`).

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

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

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

```typescript
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`.

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

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

   ```html
   <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.

```plaintext
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](https://www.tiny.cloud/docs/tinymce/latest/angular-pm/).

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