https://github.com/surmon-china/ngx-quill-editor

🍡@quilljs editor component for @angular
https://github.com/surmon-china/ngx-quill-editor

angular angular-components angular-directives angular2-component angular4 angularjs ng2 ng2-quill-editor quil quill quill-editor quilljs text-editor web-editor

Last synced: 3 months ago
JSON representation

🍡@quilljs editor component for @angular

• Host: GitHub
• URL: https://github.com/surmon-china/ngx-quill-editor
• Owner: surmon-china
• License: mit
• Archived: true
• Created: 2016-12-15T10:17:07.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-03-11T15:14:26.000Z (almost 5 years ago)
• Last Synced: 2024-05-03T10:43:53.385Z (7 months ago)
• Topics: angular, angular-components, angular-directives, angular2-component, angular4, angularjs, ng2, ng2-quill-editor, quil, quill, quill-editor, quilljs, text-editor, web-editor
• Language: TypeScript
• Homepage: https://github.surmon.me/ngx-quill-editor
• Size: 2.23 MB
• Stars: 232
• Watchers: 7
• Forks: 54
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-quill-editor - @quilljs editor component for @angular. (Uncategorized / Uncategorized)
• awesome-quill - ngx-quill-editor - Quill editor component for Angular2 (Uncategorized / Uncategorized)

README

        
# THIS PROJECT IS DEPRECATED

❌ Component is not maintained anymore.

✅ Please consider using [ngx-quill](https://github.com/KillerCodeMonkey/ngx-quill).

---

[![GitHub issues](https://img.shields.io/github/issues/surmon-china/ngx-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/ngx-quill-editor/issues)

[![GitHub forks](https://img.shields.io/github/forks/surmon-china/ngx-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/ngx-quill-editor/network)

[![GitHub stars](https://img.shields.io/github/stars/surmon-china/ngx-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/ngx-quill-editor/stargazers)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/surmon-china/ngx-quill-editor/master/LICENSE)

[![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)

# ngx-quill-editor

Quill editor for AngularX.

基于 Quill、适用于 AngularX 的富文本编辑器。

# Example

[Demo Page](https://surmon-china.github.io/ngx-quill-editor)

### Installation

``` bash

npm install ngx-quill-editor --save

```

### Sample

Include QuillEditorModule in your main module:

``` typescript

import { QuillEditorModule } from 'ngx-quill-editor';

@NgModule({

  // ...

  imports: [

    QuillEditorModule

  ],

  // ...

})

export class AppModule {}

```

Then use it in your component:

``` html

```

``` javascript

import { Component } from '@angular/core';

@Component({

  selector: 'sample',

  template: require('./sample.html')

})

export class Sample {

  public editor;

  public editorContent = `
I am Example content
`;

  public editorOptions = {

    placeholder: "insert content..."

  };


  constructor() {}

  onEditorBlured(quill) {

    console.log('editor blur!', quill);

  }

  onEditorFocused(quill) {

    console.log('editor focus!', quill);

  }

  onEditorCreated(quill) {

    this.editor = quill;

    console.log('quill is ready! this is current quill instance object', quill);

  }

  onContentChanged({ quill, html, text }) {

    console.log('quill content is changed!', quill, html, text);

  }

  ngOnInit() {

    setTimeout(() => {

      this.editorContent = '
content changed!
';

      console.log('you can use the quill instance object to do something', this.editor);

      // this.editor.disable();

    }, 2800)

  }

}

```


### Configuration

- options : The configuration object for quill see https://quilljs.com/docs/quickstart/