当前位置: 首页 > 工具软件 > ngx-quill > 使用案例 >

ngx-quill 简单使用方式

华星剑
2023-12-01

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);
          })
        }
    
 类似资料: