Angular for tinymce
Tinymce Components build with Angular.
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/"
}
]
@Component({
template: `<tinymce />`,
standalone: true,
imports: [TinymceComponent],
})
export class App
Globa config:
bootstrapApplication(AppComponent, {
providers: [provideTinymce({baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/'})]
});
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<tinymce [(ngModel)]="html"></tinymce>`
})
export class AppComponent {
html = ``;
}
angular-cli
please refer to Installation instructions.stackblitz
sample available here.Name | Type | Default | Summary |
---|---|---|---|
config | any |
see configure | |
loading | string,TemplateRef |
- | Loading status of tinymce |
disabled | boolean |
false |
Set tinymce mode is readonly if true |
inline | boolean |
false |
Inline editor |
delay | number |
0 | Delayed rendering, unit is 'millisecond' |
placeholder | string |
- | Placeholder for tinymce, NOTE: dependent on tinymce-placeholder |
ready | EventEmitter<any> |
- | Tinymce ready callback |
Please follow this guidelines when reporting bugs and feature requests:
Thanks for understanding!
The MIT License (see the LICENSE file for the full text)