ngx-quill 简单使用方式

ngx-quill 简单使用方式

概括

ngx-quill是 angular (>=2) 的富文本编辑器，可以让我们快速的实现一个富文本编辑器，ngx-quill 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 ngx-quill 把传统的多行文本输入框(textarea)替换为可视化的富文本.
// 参考资料 （ps：ngx-quill 和 quill 都有对应文档，但不是很好理解）
ngx-quill官网：https://www.npmjs.com/package/ngx-quill
quill官网：https://quilljs.com/
quill中文文档：https://www.kancloud.cn/liuwave/quill/1409374

选择版本

由于 Angular 版本过多，需要根据 Angular 版本去挑选对应的ngx-quill版本 https://www.npmjs.com/package/ngx-quill
点击 Version 查看版本列表，选择某一个版本查看详情，找到 Compatibility to Angular Versions 项，可以看到兼容 Angular 的版本

使用

• 安装

    npm install ngx-quill@x.x.x 
  

• 使用
  在 module 中导入 QuillModule

    import { QuillModule } from 'ngx-quill';
    imports: [
        QuillModule.forRoot(),
    ]
  

  在index.html中引入css

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

  在页面中直接使用

    <quill-editor></quill-editor>
  

自定义工具栏

    <quill-editor [modules]="modules"></quill-editor>
    modules: any = {
        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']                         // link and image, video 比如说这里用不到 video 就可以把 video 去掉
        ],
    };

注意事项

• 图片处理
  图片的来源有两种，一种是用户点击选择本地图片上传，另一种是从其他地方复制过来的图片，如果从本地上传图片不经过任何处理，编辑器会把图片默认转成base64的格式，如果图片太大会对数据库存取不太友好，这时需要转成 Url 格式。
  本地图片处理方式：
  使用 onEditorCreated 富文本初始化钩子函数，给 image 绑定上传图片的方法

    <quill-editor (onEditorCreated)="EditorCreated($event)"></quill-editor>
    /**
     * @param quill quill的实例
     * @description 富文本初始化钩子函数
     */
    EditorCreated(quill: any): void {
        // 获取quill的工具栏对象
        const toolbar = quill.getModule('toolbar');
        // 给工具栏的image功能添加自定义函数，注意this指向问题
        toolbar.addHandler('image', this.imgFun.bind(this));
        // 保存quill对象
        this.editor = quill;
    }
    /**
      * @description 上传图片的方法
      */
    imgFun(): void {
        // 计算用户选择的范围，可选是否要求焦点在编辑器上(如果focus为true，且焦点会一直在编辑器内，且不改变选区)。如果焦点不在编辑器上，将会返回null。
        let index = this.editor.getSelection(true).index；
        // 图片上传完成之后会返回图片的 URL 地址这时就可以往富文本插入一张图片
        this.editor.insertEmbed(index, 'image', 'url');
    }
  

• 如果图片是从其他地方复制的，src就是被复制图片的原路径，有时候我们需要把复制过来的图片上传到我们的服务器上，而不是从其他服务器上获取，

      <quill-editor (onEditorCreated)="EditorCreated($event)"></quill-editor>
      /**
       * @param quill quill的实例
       * @description 富文本初始化钩子函数
       */
      EditorCreated(quill: any): void {
          // 当用户在浏览器用户界面发起“粘贴”操作时，会触发paste事件。
          // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/paste_event  可以了解 paste 更多信息
          quill.root.addEventListener('paste', (e) => {
          e.preventDefault();
          const index = quill.getSelection();
          const clipboardData = e.clipboardData || (window as any).clipboardData;
          const tmp = document.createElement('div')；
          tmp.innerHTML = clipboardData.getData('text/html');
          const imgNodeList = tmp.querySelectorAll('img');
          console.log('imgNodeList====>', imgNodeList);
          // imgNodeList： 这里可以拿到所有的图片信息，这时候就可以把图片上传到我们的服务器上
          // 把图片上传完成之后，把imgNodeList[0].src = '替换成我们服务器上的URL';
          // 最后把处理完成的内容粘贴到富文本里
          quill.clipboard.dangerouslyPasteHTML(index, tmp.innerHTML);
        })
      }