Angular4 quill 富文本編輯器實現

使用quill富文本編輯器實現，angular項目中用到了ngx-quill插件。

quill的GitHub地址：https://github.com/quilljs/quill

ngx-quill的GitHub地址：https://github.com/KillerCodeMonkey/ngx-quill

 

1.Installation

npm install ngx-quill

npm install ng2-quill-editor --save

 

2.quill的配置

import { QuillModule } from 'ngx-Quill';

@NgModule({
  declarations: [
    ...routedComponents
  ],
  imports: [
  
    QuillModule,
  ],
  providers: [
    ....
  ]
})
export class HomeModule { }

在index.html中添加quill的樣式 :

<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

 

3.使用

在頁面使用標簽<quill-editor></quill-editor>，效果如下：

    上圖中配置后的工具類，代碼如下：

    <quill-editor [modules]="quillConfig" [style]="{height: '200px'}" [(ngModel)]="Content"></quill-editor>                   


    quillConfig = {
        toolbar: [
            //['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            //[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
            //[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            //[{ 'direction': 'rtl' }],                         // text directio
            //[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            //[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            //[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            //[{ 'font': [] }],
            //[{ 'align': [] }],
            //['clean'],                                         // remove formatting button
            ['link', 'image', 'video']                         // link and image, video
        ]
    }; 
                     

自定義工具欄：

<quill-editor [style]="{height: '200px'}" [(ngModel)]="data.content" placeholder="在這里詳細描述一個推薦原因，\n">
            <div quill-editor-toolbar>
              <span class="ql-formats">
                <button type="button" class="ql-header" value="1"></button>
                <button type="button" class="ql-header" value="2"></button>
                <button type="button" class="ql-blockquote"></button>
                <button type="button" class="ql-code-block ql-active"></button>
                <button type="button" class="ql-list" value="ordered"></button>
              </span>
              <span class="ql-formats">
                  <button type="button" class="ql-link"></button>
                  <button type="button" style="outline:none">
                    <div class="upload_img">
                        <svg class="camera" viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>
                        <input type="file" class="file_input" ng2FileSelect [uploader]="uploader2" />
                    </div>
                </button>
              </span>
              <span class="ql-formats">
                  <p style="font-size: 9px;" *ngIf="uploader2?.queue.length > 0">圖片已上傳：{{ uploader2?.queue.length > 0 ? uploader2?.queue[uploader2?.queue.length-1]?.progress : 0 }}%</p>
              </span>
            </div>
          </quill-editor>

上傳圖片代碼（使用了ng2-file-upload插件）：

public uploader2: FileUploader;

this.uploader2 = new FileUploader({
      url: this.URL
      , method: "POST"
      , itemAlias: "upfile"
      , autoUpload: true
    });
    this.uploader2.onSuccessItem = function (item, response, status, headers) {
      if(status == 200){
        let rsp = JSON.parse(response);
        let img = '<img class="camera" src="'+"http://您的域名"+  rsp.url+'" alt="">';
        that.data.content += img;
      }
    };