Tinymce rich text
Note: third party widget is not registered by default, see details from Customize Widgets.
Installation dependencies
Since the Tinymce editor relies on a third-party plug-in ngx-tinymce, the dependency should be installed first when using it
yarn add ngx-tinymce
Import module
The project built using the latest scaffolding provides a third-party widget registration entry: src/app/shared/json-schema/json-schema.module.ts
.
TinymceWidget
needs to be declared in JsonSchemaModule
.
Take the given plug-in list and toolbar as a full list, which can be deleted according to needs.
export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget];
@NgModule({
declarations: SCHEMA_THIRDS_COMPONENTS,
imports: [
SharedModule,
DelonFormModule.forRoot(),
NgxTinymceModule.forRoot({
baseURL: './assets/tinymce/',
config: {
language: 'zh_CN',
language_url: './assets/tinymce/langs/zh_CN.js',
branding: false,
paste_data_images: true,
automatic_uploads: false,
menubar: true,
toolbar_mode: 'wrap',
plugins:
'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount image textpattern help emoticons autosave autoresize',
toolbar:
'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em'
}
})
],
exports: SCHEMA_THIRDS_COMPONENTS
})
export class JsonSchemaModule {
}
Widget registration
export class JsonSchemaModule {
constructor(widgetRegistry: WidgetRegistry) {
widgetRegistry.register(TinymceWidget.KEY, TinymceWidget);
}
}
Import resources
Tinymce supports a highly customized plug-in mode, which can effectively reduce the size of the package body by configuring plug-ins and static resources.
Plug-in download: CustomBuilds
Language package download: LanguagePackages
Put the downloaded plug-in into a directory accessible by baseURL
Put the downloaded language pack into a directory accessible by language_url
Source Code
Source Code。