Angular所见即所得的应用编辑器– ngx-editor

Angular所见即所得的应用编辑器– ngx-editor
插件名称 ngx-editor
发布时间 2020年8月3日
插件作者 Sibiraj-S

Angular 2+应用程序的另一个简单的WYSIWYG文本编辑器。

安装:

# Yarn
$ yarn add ngx-editor

# NPM
$ npm install ngx-editor –save

用法

导入ngx-editor模块

import { NgxEditorModule } from 'ngx-editor';

@NgModule({
  imports: [NgxEditorModule],
})

export class AppModule {}

然后用HTML

<ngx-editor [ngModel]="jsonDoc"></ngx-editor>

为了ngModel工作,您必须FormsModule@angular/forms

可选配置

import { menu, placeholder, schema } from 'ngx-editor';

NgxEditorModule.forRoot({
  schema, // 可选的scheama,请参见https://sibiraj.dev/ngx-editor/additional-documentation/schema.html
  plugins: [
    menu({
      // 默认选项(可选)
      toolbar: [
        ['bold', 'italic', 'code'], // 内联图标
        ['ordered_list', 'bullet_list'],
        [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }] // 下拉
        [codemirror] // 自定义菜单,请参见https://sibiraj.dev/ngx-editor/additional-documentation/menu-plugin.html
      ],
      labels: {
        bold: 'Bold',
        italics: 'Italics',
        code: 'Code',
        ordered_list: 'Ordered List',
        bullet_list: 'Bullet List',
        heading: 'Heading'
      }
    }),
    placholder('Type something here...')
  ],
  nodeViews: {} // 可选的,参见https://prosemirror.net/examples/footnote/
});

兼容性

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Opera