@ndflexcore/angular-editor v1.0.84

ND Flex Core AngularEditor

Fork of @kolkov/angular-editor modified for specific needs of our company. Please use the original repo at https://github.com/kolkov/angular-editor.

Important versions

Latest
This version introduces several breaking changes:

• uses Ivy compiler
• does not support projects with older CkFinder component for inserting images / files
• requires at least Angular 14
• this version is intended for projects based on Flex Core from 2023

1.0.81
From this version on, all inserted images are automatically inserted to <picture> element, thus webp images will be used, if possible on the target project.
If you do not plan using webp, use 1.0.80.

Getting Started

Installation

Install via npm package manager

npm install @ndflexcore/angular-editor --save

Usage

Import angular-editor module

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

@NgModule({
  imports: [ HttpClientModule, AngularEditorModule ]
})

Then in HTML

<angular-editor [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent" (ftpNeeded)="onFtpNeeded($event)" [ftpLink]="selectedFtpLink"></angular-editor>

or for usage with reactive forms

<angular-editor formControlName="htmlContent" [config]="editorConfig" (ftpNeeded)="onFtpNeeded($event)" [ftpLink]="selectedFtpLink"></angular-editor>

if you using more than one editor on same page set id property

<angular-editor id="editor1" formControlName="htmlContent1" [config]="editorConfig" (ftpNeeded)="onFtpNeeded($event)" [ftpLink]="selectedFtpLink"></angular-editor>
<angular-editor id="editor2" formControlName="htmlContent2" [config]="editorConfig" (ftpNeeded)="onFtpNeeded($event)" [ftpLink]="selectedFtpLink"></angular-editor>

where

import { AngularEditorConfig } from '@ndflexcore/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',
    language: 'cs',
    imageServerUrl: '',
    imageType: 'preview',
    presetWidth: 98,
    presetHeight: 98,
    toolbarHiddenButtons: [
      ['bold', 'italic'],
      ['fontSize']
    ]
};

For ngModel to work, you must import FormsModule from @angular/forms, or for formControlName, you must import ReactiveFormsModule from @angular/forms

API

Inputs

Outputs

Methods

Other

Configuration

toolbarHiddenButtons: [
  [
    'undo',
    'redo',
    'bold',
    'italic',
    'underline',
    'strikeThrough',
    'subscript',
    'superscript',
    'justifyLeft',
    'justifyCenter',
    'justifyRight',
    'justifyFull',
    'indent',
    'outdent',
    'insertUnorderedList',
    'insertOrderedList',
    'heading',
    'fontName'
  ],
  [
    'fontSize',
    'textColor',
    'backgroundColor',
    'customClasses',
    'link',
    'unlink',
    'insertImage',
    'insertVideo',
    'insertHorizontalRule',
    'removeFormat',
    'toggleEditorMode'
  ]
]

What's included

Within the download you'll find the following directories and files. You'll see something like this:

angular-editor/
└── projects/
    ├── angular-editor/
    └── angular-editor-app/

angular-editor/ - library

angular-editor-app/ - demo application

Creators

Andrey Kolkov

• https://github.com/kolkov

The Author of the original repo. Thank you Andrey and Long Life to Russia!

Petr Humplík on behalf of NetDirect s.r.o.

• https://github.com/ndflexcore

Author of the specifically modified version (this repo).

License

MIT