Angular的本机所见即所得编辑器 - angular-editor

Angular的本机所见即所得编辑器 - angular-editor
插件名称 angular-editor
发布时间 2020年5月7日
插件作者 kolkov

一个简单但高度可定制的本机所见即所得编辑器,用于您的下一个Angular应用程序。

安装:

# NPM
$ npm install @kolkov/angular-editor --save

导入模块:

import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-editor';
@NgModule({
  imports: [ HttpClientModule, AngularEditorModule ]
})

基本用法:

<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',
  uploadWithCredentials: false,
  sanitize: true,
  toolbarPosition: 'top',
  toolbarHiddenButtons: [
    ['bold', 'italic'],
    ['fontSize']
  ]
};