angular4 富文本编辑器

使用quill富文本编辑器实现，angular项目中用到了ngx-quill插件。

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

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

ngx-quill适用于版本号在2以及以上的angular。

具体操作如下：

1、ngx-quill的安装

angular >= 5时ngx-quill的安装

npm install ngx-quill

angular < 5时

npm install ngx-quill@1.6.0

2、quill的配置

引入（ngx-quill的）QuillModule :
　　import { QuillModule } from 'ngx-quill'
在你的NgModule中添加 QuillModule :

　　@NgModule({
　　imports: [
　　　　...,

　　　　QuillModule
　　],
　　...
　　})

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

3、使用

在页面使用标签<quill-editor></quill-editor>进行使用，效果如下：

上图中的工具类是配置后的工具类，代码如下：

<quill-editor [modules]="config" [style]="{height: '200px'}" [(ngModel)]="data.content"></quill-editor>

config的内容如下：

{
  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 direction

    //[{ '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
  ]
};

-------------------------------------------------

2018-05-13 16:13:20

自定义工具栏

<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;
      }
    };

angular4 富文本编辑器

推荐阅读