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。

编辑分享