Custom Content and Formatting 富文本框批量上传 quill

https://quilljs.com/guides/why-quill/#custom-content-and-formatting

Custom Content and Formatting

It was not far in the past that evaluating rich text editors was as simple as comparing a checklist of desired formats. The mark of a good rich text editor was simply how many formats it supported. This is still an important measure, but the lower bound is approaching infinity.

Text is no longer written to be printed. It is written to be rendered on the web—a much richer canvas than paper. Content can be live, interactive, or even collaborative. Only some rich text editors can even support simple media like images and videos; almost none can embed a tweet or interactive graph. Yet this is the direction the web is moving: richer and more interactive. The tools supporting content creation need to consider these use cases.

Quill exposes its own document model, a powerful abstraction over the DOM, allowing for extension and customization. The upper limit on the formats and content Quill can support is unlimited. Users have already used it to add embedded slide decks, interactive checklists, and 3D models.

With Custom Attached Image Upload
import fetch from 'isomorphic-unfetch';

export default () => {
  const { quill, quillRef } = useQuill();

  // Insert Image(selected by user) to quill
  const insertToEditor = (url) => {
    const range = quill.getSelection();
    quill.insertEmbed(range.index, 'image', url);
  };

  // Upload Image to Image Server such as AWS S3, Cloudinary, Cloud Storage, etc..
  const saveToServer = async (file) => {
    const body = new FormData();
    body.append('file', file);

    const res = await fetch('Your Image Server URL', { method: 'POST', body });
    insertToEditor(res.uploadedImageUrl);
  };

  // Open Dialog to select Image File
  const selectLocalImage = () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = () => {
      const file = input.files[0];
      saveToServer(file);
    };
  };

  React.useEffect(() => {
    if (quill) {
      // Add custom handler for Image Upload
      quill.getModule('toolbar').addHandler('image', selectLocalImage);
    }
  }, [quill]);

  return (
    

      

    
  );
};

https://www.npmjs.com/package/react-quilljs

With Custom Attached Image Upload