AngularEditor适用于 Angular 的富文本编辑器-技术圈

AngularEditor适用于 Angular 的富文本编辑器

联合创作 · 2023-09-30 15:57

AngularEditor 是一个简单的原生 WYSIWYG/Rich Text 编辑器，适用于 Angular 6 至 12+。

安装

通过 npm 包管理器安装



npm install @kolkov/angular-editor --save

版本

1.0.0 及更高版本 —— 适用于 Angular v8.xx 及更高版本

0.18.4 及更高版本 —— 适用于 Angular v7.xx

0.15.x —— 适用于 Angular v6.xx

用法

导入angular-editor模块



import { HttpClientModule} from '@angular/common/http';

import { AngularEditorModule } from '@kolkov/angular-editor';



@NgModule({

  imports: [ HttpClientModule, AngularEditorModule ]

})

然后在 HTML 中



<angular-editor [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></angular-editor>

如果您在同一页面设置id属性上使用多个编辑器



<angular-editor id="editor1" formControlName="htmlContent1" [config]="editorConfig"></angular-editor>

<angular-editor id="editor2" formControlName="htmlContent2" [config]="editorConfig"></angular-editor>



import { AngularEditorConfig } from '@kolkov/angular-editor';





editorConfig: AngularEditorConfig = {

    editable: true,

      spellcheck: true,

      height: 'auto',

      minHeight: '0',

      maxHeight: 'auto',

      width: 'auto',

      minWidth: '0',

      translate: 'yes',

      enableToolbar: true,

      showToolbar: true,

      placeholder: 'Enter text here...',

      defaultParagraphSeparator: '',

      defaultFontName: '',

      defaultFontSize: '',

      fonts: [

        {class: 'arial', name: 'Arial'},

        {class: 'times-new-roman', name: 'Times New Roman'},

        {class: 'calibri', name: 'Calibri'},

        {class: 'comic-sans-ms', name: 'Comic Sans MS'}

      ],

      customClasses: [

      {

        name: 'quote',

        class: 'quote',

      },

      {

        name: 'redText',

        class: 'redText'

      },

      {

        name: 'titleText',

        class: 'titleText',

        tag: 'h1',

      },

    ],

    uploadUrl: 'v1/image',

    upload: (file: File) => { ... }

    uploadWithCredentials: false,

    sanitize: true,

    toolbarPosition: 'top',

    toolbarHiddenButtons: [

      ['bold', 'italic'],

      ['fontSize']

    ]

};

为了让 ngModel 正常使用，必须从 @angular/forms 导入 FormsModule，或者对于 formControlName，必须从 @angular/forms 导入 ReactiveFormsModule。

编辑分享