JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 25
  • Score
    100M100P100Q52341F
  • License MIT

Package Exports

  • @atoze/angular-editor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@atoze/angular-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

AngularEditor

A simple native wysiwyg editor for Angular 6+, 7+

Demo

Demo is here demo

Working code for this demo at stackblitz example

Getting Started

Installation

Install via npm package manager

npm install @kolkov/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"></angular-editor>

or for usage with reactive forms

<angular-editor formControlName="htmlContent" [config]="editorConfig"></angular-editor>

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

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

where

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

...

editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
    uploadUrl: 'v1/images', // if needed
    customClasses: [ // optional
      {
        name: "quote",
        class: "quote",
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: "titleText",
        class: "titleText",
        tag: "h1",
      },
    ]
  };

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