markdown Markdown编辑器

Markdown编辑器。

注:第三方小部件默认并未注册,细节见定制小部件

如何使用

导入模块

默认需要自行在两个地方注册 SimplemdeModule

  • AppModule 导入 SimplemdeModule.forRoot({}) 允许指定一个全局配置

  • SharedModule 导入 SimplemdeModule 确保所有子模块可以使用

导入资源

angular.json 导入相应资源。

  1. "styles": [
  2. "node_modules/ngx-simplemde/src/index.css",
  3. ],
  4. "scripts": [
  5. "node_modules/simplemde-antd/dist/simplemde.min.js",
  6. ]

源代码

源代码

代码演示

markdown Markdown编辑器 - 图1

基础样例

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { SFSchema } from '@delon/form';
  3. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5. selector: 'form-markdown-simple',
  6. template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`
  7. })
  8. export class FormMarkdownSimpleComponent {
  9. schema: SFSchema = {
  10. properties: {
  11. remark: {
  12. type: 'string',
  13. title: '描述',
  14. ui: {
  15. widget: 'md'
  16. }
  17. }
  18. }
  19. };
  20. constructor(public msg: NzMessageService) { }
  21. submit(value: any) { this.msg.success(JSON.stringify(value)); }
  22. }

API

ui 属性

成员说明类型默认值
[options]配置项说明,见官网object-
[change]编辑器内容发生改变时会触发该事件(md: string) => void-