react-quill 自定义上传图片方法
react-quill 网上找了自定义上传图片的方式。测试后都失败，会报：
react-quill addRange(): The given range isn't in document.
解决办法：
关键点： 在创建实例后，去重新设置image的uploader方法。（蓝色部分）
代码：
const [content, setContent] = useState('');
const quillEdit = useRef();
const options = useMemo(() => ({
toolbar: {
container: [
// ['bold', 'italic', 'underline', 'strike'], // toggled buttons
// ['blockquote', 'code-block'],
// ['link', 'image', 'formula'],
// [{ 'header': 1 }, { 'header': 2 }], // custom button values
// [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
// [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
// [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
// [{ 'direction': 'rtl' }], // text direction
// [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
// [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
// [{ 'font': [] }],
// [{ 'align': [] }],
// ['clean']
['image'],
],
},
}))
const quillImageUploader = () => {
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
input.setAttribute('multiple', 'multiple')
input.click()
input.onchange = async () => {
Array.from(input.files).forEach(item => {
const formData = new FormData();
formData.append('file', item, '');
R.upload('/api/admin/m/upload', formData).then(({ model }) => {
const { path } = model;
var cursorPosition = quillEdit.current.getEditor().getSelection(true).index;
quillEdit.current.getEditor().insertEmbed(cursorPosition, "image", UPLOAD_BASE_PATH + path);
quillEdit.current.getEditor().setSelection(cursorPosition + 1);
})
})
}
}
const setQuillEdit = (r) => {
quillEdit.current = r;
if (r) {
r.getEditor().getModule('toolbar').handlers.image = quillImageUploader
}
}
return (
)
<ReactQuill ref={o => setQuillEdit(o)} modules={options}
style={{ height: 400, width: 375 }}
theme='snow'
value={content}
onChange={setContent}
/>
