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=""></button>

                <button type="button" class="ql-header" value=""></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="" width="" x="" y=""></rect> <circle class="ql-fill" cx="" cy="" r=""></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 >  ? uploader2?.queue[uploader2?.queue.length-]?.progress :  }}%</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 == ){

        let rsp = JSON.parse(response);

        let img = '<img class="camera" src="'+"http://您的域名"+  rsp.url+'" alt="">';

        that.data.content += img;

      }

    };

巴特西

angular4 富文本编辑器

最新文章

热门文章