@sientech/quill-image-alt-blot NPM

@sientech/quill-image-alt-blot

Quill Rich Editor 擴充可支援插入有 alt 的圖片

install

yarn add @sientech/quill-image-alt-blot

usage

ImageBlotAlt: 擴展原 embed blots，可建立包含 alt 資料的 blot
AltImageUploader: 擴展 quill-image-uploader 模組，在插入資料時，使用 ImageBlotAlt blot。

import { ImageBlotAlt, AltImageUploader } from '@sientech/quill-image-alt-blot'
import '@sientech/quill-image-alt-blot/dist/index.css'

import { Quill } from 'quill'

// register blot
Quill.register(ImageBlotAlt)


// register imageUploader
Quill.register("modules/imageUploader", AltImageUploader);
const quill = new Quill(editor, {
  // ...
  modules: {
    imageUploader: {
      upload: (file) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(
              {
                src: 'img src',
                alt: 'img alt',
                caption: 'img caption'
              }
            );
          }, 3500);
        });
      },
    },
  },
});