markdown Markdown编辑器
Markdown编辑器。
注:第三方小部件默认并未注册,细节见定制小部件。
如何使用
导入模块
默认需要自行在两个地方注册 SimplemdeModule
。
在
AppModule
导入SimplemdeModule.forRoot({})
允许指定一个全局配置在
SharedModule
导入SimplemdeModule
确保所有子模块可以使用
导入资源
在 angular.json
导入相应资源。
"styles": [
"node_modules/ngx-simplemde/src/index.css",
],
"scripts": [
"node_modules/simplemde-antd/dist/simplemde.min.js",
]
源代码
源代码。
代码演示
基础样例
最简单的用法。
import { Component } from '@angular/core';
import { SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'form-markdown-simple',
template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`
})
export class FormMarkdownSimpleComponent {
schema: SFSchema = {
properties: {
remark: {
type: 'string',
title: '描述',
ui: {
widget: 'md'
}
}
}
};
constructor(public msg: NzMessageService) { }
submit(value: any) { this.msg.success(JSON.stringify(value)); }
}
API
ui 属性
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
[options] | 配置项说明,见官网 | object | - |
[change] | 编辑器内容发生改变时会触发该事件 | (md: string) => void | - |