如何在react-quill编辑器中获取已删除的图像url

Question

我正在使用react-quill，我想知道如何image在插入编辑器后选择一个，以及如何url在删除后获取已删除的图像。

这是我的编辑器组件

import React,{useState} from 'react'
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const modules = {
    toolbar:{
        container: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
          ],
          

          handlers:{
            'image': async function(){
                const editor = this.quill
                
                const input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.click();

                input.addEventListener('change', (e) => {
                    const url = awiat uploadFile(e.target.files[0))
                    const range = editor.getSelection(true);
                    editor.insertEmbed(range.index, 'image', url; 
                    editor.setSelection(range.index + 1)
                    
                })
            }
        }
    }
    
    
  }

  const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'color',
  ]

function Editor() {
    const [editorData,setEditorData] = useState(" ")

    const handleChange = (value) => {
        setEditorData(value)
    }
    

     return (
        <div>
            <ReactQuill formats={formats} modules={modules} value={editorData}
                  onChange={(data)=>handleChange(data)} />

        </div>
    )
}

export default Editor

那么，如何在插入图像后在编辑器中选择图像并after从编辑器中删除 url？

Answer 1

首先，您应该将上传的图像 URL 存储在数组中，例如：

const [addresses, setAddresses] = useState([])
addresses.push(url)

然后，当您提交表单时，检查这些地址是否存在于您的editor content保存中，否则将其删除。

addresses.map(async (a) => {
     if (!yourEditorValue.includes(a)) {
         /* here you can add your method according to your backend, I am 
         using strapi */
         const deletePhoto = await axios.delete(
           `${yourServerUrl}/upload/files/${id}`,
            {
              //this one is not necessary if you don't need
              headers: {
                 Authorization: `Bearer ${yourToken}`,
              },
            },
          )
      }
      return true
   })