• This repository has been archived on 12/Mar/2020
  • Stars
    star
    232
  • Rank 172,847 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🍡@quilljs editor component for @angular

THIS PROJECT IS DEPRECATED

Component is not maintained anymore.

Please consider using ngx-quill.


GitHub issues GitHub forks GitHub stars GitHub license No Maintenance Intended

ngx-quill-editor

Quill editor for AngularX.

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

Example

Demo Page

Installation

npm install ngx-quill-editor --save

Sample

Include QuillEditorModule in your main module:

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

@NgModule({
  // ...
  imports: [
    QuillEditorModule
  ],
  // ...
})
export class AppModule {}

Then use it in your component:

<!-- use with ngModel -->
<quill-editor
  [(ngModel)]="editorContent"
  [options]="editorOptions"
  (blur)="onEditorBlured($event)"
  (focus)="onEditorFocused($event)"
  (ready)="onEditorCreated($event)"
  (change)="onContentChanged($event)"
></quill-editor>


<!-- or use with formControl -->
<quill-editor
  class="form-control"
  [formControl]="editorContent"
  [options]="editorOptions"
  (blur)="onEditorBlured($event)"
  (focus)="onEditorFocused($event)"
  (ready)="onEditorCreated($event)"
  (change)="onContentChanged($event)"
></quill-editor>
import { Component } from '@angular/core';

@Component({
  selector: 'sample',
  template: require('./sample.html')
})
export class Sample {

  public editor;
  public editorContent = `<h3>I am Example content</h3>`;
  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 = '<h1>content changed!</h1>';
      console.log('you can use the quill instance object to do something', this.editor);
      // this.editor.disable();
    }, 2800)
  }
}

Configuration

More Repositories

1

vue-awesome-swiper

🏆 Swiper component for @vuejs
JavaScript
12,800
star
2

vue-quill-editor

@quilljs editor component for @vuejs(2)
JavaScript
7,368
star
3

videojs-player

@videojs player component for @vuejs(3) and React.
TypeScript
5,203
star
4

vue-codemirror

@codemirror code editor component for @vuejs
TypeScript
3,217
star
5

surmon.me

🌱 My digital garden, powered by myself.
Vue
2,091
star
6

nodepress

🟢 RESTful API service for https://surmon.me blog, powered by @nestjs
TypeScript
1,422
star
7

surmon.me.native

📱 My blog app, powered by react-native
TypeScript
620
star
8

vue-touch-ripple

A ink-ripple effect component for @vuejs
TypeScript
480
star
9

angular-admin

🔏 Admin client for surmon.me blog powered by @angular and Bootstrap4
TypeScript
354
star
10

simple-netease-cloud-music

🎵 A simple netease music api lib. 简单、统一、轻巧的 Node.js 版网易云音乐 API
TypeScript
272
star
11

surmon-china.github.io

My GitHub repositories homepage.
Vue
221
star
12

naivebayes

NaiveBayes classifier for JavaScript
JavaScript
142
star
13

vue-drag-zone

Drag Zone component for @vuejs
JavaScript
129
star
14

surmon.admin

🔏 Admin client for surmon.me blog, powered by React & @veactjs
TypeScript
61
star
15

mongodb-data-api

MongoDB Atlas Data API SDK for @nodejs
TypeScript
40
star
16

emoji-233333

😂 2333333
JavaScript
38
star
17

sre.surmon.me

💻 SRE service for Surmon.me blog.
HTML
34
star
18

vue2any

把 vue 组件转换为任何 web 类模板
JavaScript
33
star
19

wonderful-bing-wallpaper

🌅 Simple bing daily wallpaper API lib for Node.js.
TypeScript
31
star
20

vuniversal

[WIP] Create vue (3) universal web applications quickly by @vitejs.
TypeScript
19
star
21

surmon-china

About me
JavaScript
16
star
22

wordpress-theme-one

🎨 A blog theme for @wordpress
CSS
16
star
23

libundler

📦 Universal JavaScript library bundler, powered by @rollup.
TypeScript
14
star
24

developer-code-guide

🗒Developer code guide.
12
star
25

README.vue

Design your README.md by @vuejs component.
Vue
11
star
26

wordpress-theme-surmon

🎨 A blog theme for @wordpress
PHP
10
star
27

surmon.me.flutter

📱 My blog app powered by @flutter (The repositorie has been deprecated)
Dart
9
star
28

wordpress-theme-metro

🎨 A blog theme for @wordpress
PHP
9
star
29

javascript-gobang

⚫Javascript gobang game
HTML
9
star
30

nurse.js

My lib.
JavaScript
9
star
31

jquery-dragZone

jQuery 拖拽改变div大小效果
HTML
7
star
32

better-itg-flat-dark-vscode-theme

Better itg.flat.dark theme for vscode. Base on Sublime Text
7
star
33

wordpress-theme-think

🎨 A cms theme for @wordpress
PHP
7
star
34

coolcut

cool cut psd file
JavaScript
5
star
35

chrome-tmall-rate-thumb-extend

⚾️ 增加在天猫商品评价页显示原图及图片旋转操作功能
JavaScript
5
star
36

action-ssl-cert-expiry-checker

Check SSL certificate expiry time for your domains
JavaScript
3
star
37

ifttt

IFTTT SPACE
1
star
38

.github

GitHub
1
star