Open ghost opened 7 years ago
Arkine
commented
7 years ago I also am having the problem with this callback.
Every time I press enter in the textarea, it submits the editor and reloads the page. When I remove the callback, I can press enter without the textarea submitting.
SimonChris
commented
7 years ago I am having exactly the same problem. Did either of you manage to solve this?
In my case, the page even reloads when entering text into a different input component on the same page. It seems like react-tinymce is picking up on events that happens elsewhere as well.
SimonChris
commented
7 years ago I have found the cause of this issue: Whenever ComponentWillReceiveProps() is called, react-tinymce uses Lodash.isEqual() to determine whether the component should be rerendered. isEqual compares functions by strict equality. This means that any function declared inside the "config" object is considered to be a new function, causing the editor to rerender whenever anything at all changes on the page.
The solution is to move the function declaration outside the component, so that the same function object is reused every time:
function filePickerCallback(callback, value, meta) {
...
}
class Editor extends Component {
...
render() {
return (
<div>
<input type="file" id="image-upload-tinymce" name="single-image" style={{ display: "none" }} accept="image/png, image/gif, image/jpeg, image/jpg, image/svg" />
<TinyMCE
content={this.props.input.value}
config={{
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace wordcount visualblocks code',
'insertdatetime table contextmenu paste code'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
file_browser_callback_types: 'image',
file_picker_callback: filePickerCallback,
}}
id={this.props.id}
onKeyup={e => {
e.stopPropagation();
e.preventDefault();
var delay = debounce(self.onEditorChange, 500);
delay();
}}
/>
</div>
)
}
}See also #43 and #47.
I am using admin-on-rest and react-tinymce. When I include
file_picker_callbackin the tinymce config the editor will reload every time the onchange event fires.This is an issue because users are not able to continually type (editor loses focus after reloading). I have tried manually setting the focus after it reloads, but it does not focus back to the same place the cursor was previously - so this is not a viable workaround.
If I remove the
file_picker_callback, then everything works as expected.Here is my code:
I have the following in my index.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>What I have noticed is that during an onchange event there is a get request issued for:
https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/skins/lightgray/content.min.cssand the call stack for this request is as follows:
From the call stack, line 66 of TinyMCE.js is:
line 128 is
tinymce.init(config);I believe this is a bug with react-tinymce (and not admin-on-rest) - but I am not very familiar with react, so I could be wrong.
Any help or insight would be appreciated. I have spent 2 days debugging this and have made no progress