https://github.com/dimpu/ngx-quill
ngx-quill
https://github.com/dimpu/ngx-quill
Last synced: about 1 year ago
JSON representation
ngx-quill
- Host: GitHub
- URL: https://github.com/dimpu/ngx-quill
- Owner: dimpu
- License: mit
- Created: 2018-10-21T17:26:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-28T04:59:33.000Z (about 7 years ago)
- Last Synced: 2025-02-15T23:42:14.743Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://dimpu.github.io/ngx-quill/
- Size: 3.36 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ngx-quill [](https://travis-ci.org/dimpu/ngx-quill)
Angular (>=2) component for rich text editor Quill
# Example
[Demo Page](https://dimpu.github.io/ngx-quill/)
### Installation
``` bash
npm install @dimpu/ngx-quill --save
```
### Sample
Include NgxQuillModule in your main module:
``` typescript
import { NgxQuillModule } from '@dimpu/ngx-quill';
@NgModule({
// ...
imports: [
NgxQuillModule
],
// ...
})
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)
}
onReady(quill) {
const customButton = document.querySelector('#custom-button');
customButton.addEventListener('click', function() {
const range = quill.getSelection();
if (range) {
quill.insertText(range.index, 'Ω');
}
});
}
}
```
### Configuration
- options : The configuration object for quill see https://quilljs.com/docs/quickstart/