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][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

Input	Type	Default	Required	Description
id	`string`	`-`	no	Id property when multiple editor used on same page
[config]	`AngularEditorConfig`	`default config`	no	config for the editor
placeholder	`string`	`-`	no	Set custom placeholder for input area
tabIndex	`number`	`-`	no	Set Set tabindex on angular-editor
ftpLink	`DirectoryChild`	`-`	no	The ftpLink (either Image or Generic File) from external browser component

Outputs

Output	Description
(html)	Output html
(viewMode)	Fired when switched visual and html source mode
(blur)	Fired when editor blur
(focus)	Fired when editor focus
(ftpNeeded)	Fired when 'Insert Image/File from FTP' toolbar button is clicked

Methods

Name	Description
focus	Focuses the editor element

Other

Name	Type	Description
AngularEditorConfig	configuration	Configuration for the AngularEditor component.

Configuration

Input	Type	Default	Required	Description
editable	`bolean`	`true`	no	Set editing enabled or not
spellcheck	`bolean`	`true`	no	Set spellchecking enabled or not
translate	`sting`	`yes`	no	Set translating enabled or not
sanitize	`bolean`	`true`	no	Set DOM sanitizing enabled or not
height	`string`	`auto`	no	Set height of the editor
minHeight	`string`	`0`	no	Set minimum height of the editor
maxHeight	`string`	`auto`	no	Set maximum height of the editor
width	`string`	`auto`	no	Set width of the editor
minWidth	`string`	`0`	no	Set minimum width of the editor
enableToolbar	`bolean`	`true`	no	Set toolbar enabled or not
showToolbar	`bolean`	`true`	no	Set toolbar visible or not
toolbarPosition	`string`	`top`	no	Set toolbar position top or bottom
placeholder	`string`	`-`	no	Set placeholder text
defaultParagraphSeparator	`string`	`-`	no	Set default paragraph separator such as `p`
defaultFontName	`string`	`-`	no	Set default font such as `Comic Sans MS`
defaultFontSize	`string`	`-`	no	Set default font size such as `1` - `7`
uploadUrl	`string`	`-`	no	Set image upload endpoint `https://api.exapple.com/v1/image/upload`
uploadWithCredentials	`bolean`	`false`	no	Set passing or not credentials in the image upload call
fonts	`Font[]`	`-`	no	Set array of available fonts `[{name, class},...]`
customClasses	`CustomClass[]`	`-`	no	Set array of available fonts `[{name, class, tag},...]`
outline	`bolean`	`true`	no	Set outline of the editor if in focus
toolbarHiddenButtons	`string[][]`	`-`	no	Set of the array of button names or elements to hide
language	'cs' \| 'en'`	`cs`	`yes`	The language of the editor tooltips
imageServerUrl	`string`	`-`	`yes`	The URL of the Image Server
imageType	`string`	`preview`	`yes`	The Image Type
presetWidth	`number`	98	`yes`	The preset width of the image, used when user does not enter one
presetHeight	`number`	98	`yes`	The preset height of the image, used when user does not enter one

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