Open MustafaAgami opened 8 months ago
Hi, I am facing the same error.
For some reason when reading 'this' is null
Hello,
I found what was happening. In my case I was using an arrow functions and it was not catching property the "this" parameter.
In your case @MustafaAgami, you should change you call to insertImage functions. That function uses three parameters.
You can use it like that: insertImage(data.baseurl + data[field][i], null, 250), where 250 is the image default with.
I think this repo is not updated i am using jodit original and it is working fine
This is not a Jodit bug. You are using JavaScript incorrectly. You are using "this" inside defaultHandlerSuccess but the types say "this: IUploader". It doesn't have the "s" field, only Jodit has it You need to use useRef, store a reference to the Jodit instance there and then use it in your code. Like that:
function App() {
const jodit = useRef(null);
const config = useMemo(() => ({
//...,
defaultHandlerSuccess() {
//...
jodit.current.s.insertImage(...)
}
}));
return <JoditEditor ref={jodit} config={config}/>
}
Still it is not working @xdan I am getting an error with this code...
function App() {
const editor = useRef(null);
const [content, setContent] = useState('');
const config={
"buttons": "bold,italic,underline,strikethrough,source,fullsize",
"placeholder":"start typing?....",
"showCharsCounter": false,
"showWordsCounter": false,
"showXPathInStatusbar": false,
"uploader": {
url: 'http://localhost:3001/knowledgebase/upload',
isSuccess: function (resp) {
return true;
},
process: function (resp) {
console.log('Process ',resp);
return {
files: resp.data.files || [],
path: resp.data.path,
baseurl: resp.data.baseurl,
error: resp.data.error,
msg: resp.data.msg
};
},
defaultHandlerSuccess: function (data, resp) {
var i,
field = 'files';
if (data[field] && data[field].length) {
for (i = 0; i < data[field].length; i += 1) {
const imgUrl = data.baseurl + data[field][i];
console.log(imgUrl)
//this.s.selection.innerHTML("<h1>hiii</hi>")
editor.current.s.insertImage(data.baseurl + data[field][i]);
}
}
},
},
}
return (
<JoditEditor
ref={editor}
value={content}
config={config}
onBlur={newContent => setContent(newContent)}
/>
);
}
Error:
I fix it by create and using the _this variable as shown below Remember not using arrow functions
defaultHandlerSuccess: function (data, resp) {
var i,
field = 'files';
const _this = this.jodit ?? this
if (data[field] && data[field].length) {
for (i = 0; i < data[field].length; i += 1) {
_this.s.insertImage(data.baseurl + data[field][i]);
}
}
},
I have implemented jodit-react with the help of official documentation provided and it is working fine in uploading the image to the content server but I am getting an error in defaultHandlerSuccess as Cannot read properties of undefined (reading 'insertImage')
Jodit-react Version: 1.3.39
Browser: Chrome OS: Linux Is React App: True
Code
Expected behavior: The image should be successfully displayed in the Editor
Actual behavior: Image is not displaying in the Editor and giving error as: Cannot read properties of undefined (reading 'insertImage')