Home

Awesome

ngx-tinymce

NPM version Ci

Tinymce Components build with Angular.

DEMO

Installation instructions

Install ngx-tinymce from npm

npm install ngx-tinymce --save

Recommend: You will need tinymce.min.js file via Build Customizer generate.

Import the ngx-tinymce in to your root AppModule.

import { NgxTinymceModule } from 'ngx-tinymce';

@NgModule({
  imports: [
    NgxTinymceModule.forRoot({
      // Local assets
      baseURL: './assets/tinymce/',
      // or cdn
      baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/',
    }),
  ],
})
export class AppModule {}

If the local path should be adding assets configuration in angular.json:

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

Standalone

@Component({
  template: `<tinymce />`,
  imports: [TinymceComponent],
})
export class App

Globa config:

bootstrapApplication(AppComponent, {
  providers: [provideTinymce({ baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/' })],
});

Usage

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<tinymce [(ngModel)]="html"></tinymce>`,
})
export class AppComponent {
  html = ``;
}

How to use it with:

API

NameTypeDefaultSummary
configanysee configure
loadingstring,TemplateRef-Loading status of tinymce
disabledbooleanfalseSet tinymce mode is readonly if true
inlinebooleanfalseInline editor
delaynumber0Delayed rendering, unit is 'millisecond'
placeholderstring-Placeholder for tinymce, NOTE: dependent on tinymce-placeholder
readyEventEmitter<any>-Tinymce ready callback

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  1. Use GitHub Issues board to report bugs and feature requests (not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)