Markdown Editor
Note: third party widget is not registered by default, see details from Customize Widgets.
How to Use
Installation dependencies
Since the Markdown editor relies on a third-party plug-in ngx-simplemde, the dependency should be installed first when using it
yarn add ngx-simplemde
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
MarkdownWidget
needs to be declared in JsonSchemaModule
export const SCHEMA_THIRDS_COMPONENTS = [MarkdownWidget];
@NgModule({
declarations: SCHEMA_THIRDS_COMPONENTS,
imports: [
SharedModule,
DelonFormModule.forRoot(),
SimplemdeModule.forRoot({ style: 'default' }),
],
exports: SCHEMA_THIRDS_COMPONENTS
})
export class JsonSchemaModule {
}
Widget registration
export class JsonSchemaModule {
constructor(widgetRegistry: WidgetRegistry) {
widgetRegistry.register(MarkdownWidget.KEY, MarkdownWidget);
}
}
Import resources
Import the corresponding resources in angular.json
.
"styles": [
"src/styles.less"
]
"scripts": [
"node_modules/simplemde-antd/dist/simplemde.min.js"
]
Import styles
After using style.less
as the style entry, you need to import the style file of ngx-simplemde
and define some custom variables
// src/style.less
@import 'ngx-simplemde/index.less';
// Change existing parameters here:
@simplemde-icon-url: '//at.alicdn.com/t/font_700857_mnodkd1cp9l766r';
@simplemde-statusbar-lines: 'Lins:';
@simplemde-statusbar-words: 'words:';
@simplemde-statusbar-characters: '字符:';
@simplemde-statusbar-counts: '字数:';
Source Code
Source Code.