4

我正在使用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。

4

1 回答 1

0

首先，您应该将上传的图片 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
   })
于 2021-12-06T05:17:01.510 回答