Reactjs React Quill自定义图像处理程序不工作
有人能帮我找出代码中的问题吗。我已经创建了一个自定义图像上载选项,但由于某些原因,当调用quillImageCallback函数时,变量“quillReact”将为null。我在用鱼钩。使用API时正确上载图像,并从后端返回正确响应Reactjs React Quill自定义图像处理程序不工作,reactjs,react-quill,Reactjs,React Quill,有人能帮我找出代码中的问题吗。我已经创建了一个自定义图像上载选项,但由于某些原因,当调用quillImageCallback函数时,变量“quillReact”将为null。我在用鱼钩。使用API时正确上载图像,并从后端返回正确响应 let quillReact: ReactQuill | null = null; const updateIssueInfo = (value: string, delta: any, source: any, editor: any) => {
let quillReact: ReactQuill | null = null;
const updateIssueInfo = (value: string, delta: any, source: any, editor: any) => {
setIssueManagementInEdit({
...issueManagementInEdit,
description: value
});
};
const quillImageCallback = () => {
console.log(issueManagement);
const input = document.createElement("input");
input.setAttribute("type","file");
input.setAttribute("accept", "image/*");
input.click();
input.onchange = async () => {
const file: File | null = input.files ? input.files[0] : null;
if(file){
uploadImage(file).then(async (fileName: any) => {
const newFileName:string = await fileName.text();
console.log(quillReact);
let quill: any | null = quillReact?.getEditor();
console.log(quill);
const range : any | null = quill?.getSelection(true);
quill?.insertEmbed(range.index, 'image', `http://localhost:8080/uploads/${newFileName}`);
});
}
}
};
const module = React.useMemo(() => { return {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ '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'] // remove formatting button
],
handlers: {
image: quillImageCallback
}
},
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
}
}},[]);
<ReactQuill
value={issueManagementInEdit.description ? issueManagementInEdit.description : ""}
onChange={updateIssueInfo}
modules={module}
ref={(el: ReactQuill) => {
quillReact = el;
} }
style={{height: "250px"}}
id="description"
key="description"
/>
let quillReact:ReactQuill | null=null;
const updateIssueInfo=(值:字符串,增量:任意,源:任意,编辑器:任意)=>{
SetIssueManagementId({
…发布管理信息,
说明:价值
});
};
常量quillImageCallback=()=>{
控制台日志(issueManagement);
常量输入=document.createElement(“输入”);
input.setAttribute(“类型”、“文件”);
input.setAttribute(“接受”、“图像/*”);
输入。单击();
input.onchange=async()=>{
常量文件:file | null=input.files?input.files[0]:null;
如果(文件){
上载映像(文件)。然后(异步(文件名:any)=>{
const newFileName:string=await fileName.text();
控制台日志(quillReact);
让quill:any | null=quillReact?.getEditor();
原木(纬管);
常数范围:任意| null=quill?.getSelection(true);
纬管?.insertEmbed(range.index,'image'`http://localhost:8080/uploads/${newFileName}`);
});
}
}
};
const module=React.useMoom(()=>{return{
工具栏:{
容器:[
['bold'、'italic'、'underline'、'strike'],//切换按钮
['blockquote','code block'],
[{'header':1},{'header':2}],//自定义按钮值
[{'list':'ordered'},{'list':'bullet'}],
[{'script':'sub'},{'script':'super'}],//上标/下标
[{'indent':'-1'},{'indent':'+1'}],//outdent/indent
[{'direction':'rtl'}],//文本方向
[{'size':['small',false',large',mage']},//自定义下拉列表
[{'header':[1,2,3,4,5,6,false]},
[{'color':[]},{'background':[]}],//主题中带有默认值的下拉列表
[{'font':[]}],
[{'align':[]}],
['clean','image']//删除格式化按钮
],
处理程序:{
图片:quillImageCallback
}
},
剪贴板:{
//切换以在粘贴HTML时添加额外的换行符:
对:错,,
}
}},[]);
{
纬管反应=el;
} }
样式={height:“250px”}
id=“说明”
key=“description”
/>
谢谢。我建议您试试:
const quillRef = React.useRef(null);
<ReactQuill ... ref={quillRef} />
const quill = quillRef.current.getEditor();