You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I need to get editor reference since i am trying to implement wordpress like image insert feature, where image insert code will be owned by me and I will use the command editorRef.insertContent('<a href="${image_url}">document</a>');
But when I have multiple instances of tinymce i am not able to get editorRef correctly.
Here is my code
import React from 'react';
import { Editor } from '@tinymce/tinymce-react';
class CustomWisivigComponent extends React.Component {
constructor(props) {
super(props);
this.putWisivigRef = this.putWisivigRef.bind(this);
this.returnCmp = <Editor
apiKey={"myKey"}
init={{
setup: (editor) => this.putWisivigRef(editor),
height: 700,
plugins: 'image table link code',
selector: "textarea", // change this value according to your HTML
default_link_target: "_blank"
}}
initialValue={this.props.value}
onEditorChange={(event) => {
this.props.onChange(event)
}}
/>
}
putWisivigRef(ref) {
console.log("setting editorRef to "+ref.id + " in component with props="+JSON.stringify(this.props))
this.setState({editorRef: ref})
}
onImageInsert(propd) {
console.log(this.state.editorRef)
}
render() {
return (
<div>
{this.returnCmp}
</div>
);
}
}
export default CustomWisivigComponent;
The problem is when i execute the code putWisivigRef is called with two references but the context of this is missed and always the putWisivigRef of first component is called. And hence when I try to insert something in the first component, it gets inserted into second (since first one's reference gets overridden) and when I try to insert in 2nd it results into null pointer, since it was never called. I tried passing this from the setup: (editor) => this.putWisivigRef(editor) as well but that too did not work.
when we render the above form it logs
but ideally it should have been
setting editorRef to tiny-react_10038262721546162755458 in component with props={"id":"1"}
setting editorRef to tiny-react_19726510231546162755460 in component with props={"id":"2"}
The text was updated successfully, but these errors were encountered:
I need to get editor reference since i am trying to implement wordpress like image insert feature, where image insert code will be owned by me and I will use the command
editorRef.insertContent('<a href="${image_url}">document</a>');
But when I have multiple instances of tinymce i am not able to get editorRef correctly.
Here is my code
And I am trying to render it like this
The problem is when i execute the code putWisivigRef is called with two references but the context of this is missed and always the putWisivigRef of first component is called. And hence when I try to insert something in the first component, it gets inserted into second (since first one's reference gets overridden) and when I try to insert in 2nd it results into null pointer, since it was never called. I tried passing this from the setup: (editor) => this.putWisivigRef(editor) as well but that too did not work.
when we render the above form it logs
but ideally it should have been
setting editorRef to tiny-react_10038262721546162755458 in component with props={"id":"1"}
setting editorRef to tiny-react_19726510231546162755460 in component with props={"id":"2"}
The text was updated successfully, but these errors were encountered: