Как получить URL-адрес удаленного изображения в редакторе React-Quill - PullRequest
Новая
       27

Как получить URL-адрес удаленного изображения в редакторе React-Quill

0 голосов
/ 19 июня 2020

Я использую 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

Итак, как я могу выбрать изображение внутри редактора после того, как оно было вставлено, и получить URL-адрес after, удаляемый из редактора.

...