Ng-simple-editor NPM

Angular Simple Editor

Why

I search Angular/Ionic Web editors and I couldn't find simple one. All of them have dependencies like jQury, Bootstrap, Fontawesome, etc.
So I made one. It's deadly simple. Easy to edit. No dependencies at all.

Demo

GitHub Page Demo

Example code

@see Example Component Template

How to Install

npm install --save ng-simple-editor

How to serve as developer

Serving

You need to run two Angular building process. One for App component serving and the other is for editor building.

ng s

ng build ng-simple-editor --watch

Publising

Patch version in projects/ng-simple-editor/package.json.
And run publish command.

npm run lib:publish

How to Use

How to set up

And add NgSimpleEditorModule to AppModule or any where.

import { NgSimpleEditorModule } from 'ng-simple-editor';
@NgModule({
  ...
  imports: [
    NgSimpleEditorModule
  ],
  ...
})
export class AppModule { }

How to use it in template

Two-way binding. Don't forget to put 'name' attribute if it is used in form.

<ng-simple-editor [init]="{ cursor: true }" [icons]="true" name="html" [(html)]=" html "></ng-simple-editor>
HTML content: {{ html }}

Event handling

<ng-simple-editor #editor></ng-simple-editor>
content: {{ editor.content }}

Add buttons.
- By default, if buttons is omitted, then it shows all the possible butttons.
- You can add indivisual buttons. Order of buttons matters in the order of display.

  <ng-simple-editor #editor
    [buttons]="['bold', 'italic', 'underline', 'fontsize', 'forecolor', 'backcolor', 'highlight', 'link', 'unink', 'table', 'formatblock', 'insertline', 'insertimage', 'orderedlist', 'unorderedlist', 'left', 'center', 'removeformat', 'strike', 'big', 'normal']"
  ></ng-simple-editor>
  content: {{ editor.content }}

Display icons instead of text buttons.
- To display icons, set [icons]="true" on the component.

<ng-simple-editor #editor4 [init]="{ cursor: true }" [icons]="true"></ng-simple-editor>
HTML content: {{ editor4.content }}

And put/get HTML into the editor.

  @ViewChild('editor') editor: NgSimpleEditorComponent;
  ngAfterContentInit() {
    this.editor.putContent(`<h1>Let's Edit!</h1>`);
  }
  /**
   * Get the HTML of editor
   */
  const html = this.editorComponent.getContent();

There is another handy way to insert HTML into editor. When the component is created dynamically using *ngIf=" ... ", it is not easy to know when @ViewChild() editor: EditComponet; is ready to use editor.putContent(). It often causes calling putContent() of undefined. In this case you can use [init] property to insert the default HTML content into editor.

<ng-simple-editor #editor *ngIf=" mode != 'fake' "
  [init]=" { content: comment.content_original }"
  [buttons]="['bold', 'italic', 'unerline', 'fontname', 'fontsize', 'forecolor', 'backcolor', 'highlight', 'link', 'unink', 'table', 'formatblock', 'insertline', 'insertimage', 'orderedlist', 'unorderedlist', 'left', 'center', 'right', 'removeformat', 'strike', 'big', 'normal']"
></ng-simple-editor>

How to set cursor. For post writing, you will need to put cursor on subject input tag. For comment write/edit, you will need to put cursor on editor.

      <ng-simple-editor #editorComponent *ngIf=" mode != 'fake' "
        [init]=" { content: comment?.content_original, cursor: true }"
        [buttons]="['bold', ..., 'normal']"
      ></ng-simple-editor>

Buttons

Buttons on editor appears in the order of that they were given in buttons property.
Name of buttons

Events

change event on content changes

<ng-simple-editor #editor (change)=" onChange( $event ) "></ng-simple-editor>

If you are going to use event parameter from editor, it may contain not only the content but also other event. So, if you want to handle with the content of the ditor, use this.editor.content instead.

  onChange(event: Event) {
    this.content = this.editor.content;
  }

Init options

content (string) - initial content. It may be overwritten by two-way binding. Default empty string.
cursor (boolean) - to put cursor inside editor. Default false.
menuTop (boolean) - to show menu buttons on top. Default true.
menuBottom (boolean) - to show menu buttons at bottom. Default true.

How to upload files

ng-simple-editor does not have file/photo/video upload functionaliy. You have to make your own file upload function in your app. And then you can insert your uploaded file into editor using editor.insertImage() method.

Design

ViewEncapsulation.None is set on the NgSimpleEditorComponent.
DOM structure

div.editor
  div.buttons
  div.content

Example of auto grow for editor content. You may remove + and - button in this case.

.editor {
    .content {
        height: auto !important;
        min-height: 120px;
        max-height: 200px;
    }
}

Tips

On mobile, it is not easy selecting texts and apply HTML. So, in mobile, you may show only thoese buttons that does not require text selection like format, left, center, right, ol, ul, etc.