Closed fabienbranchel closed 7 years ago
The issue is text is being changed in a text-change handler. This pattern in general should be avoided (not just in Quill) but even so Quill tries to handle this but it appears Chrome does not respect the try catch block: https://jsfiddle.net/scwp779y/1/. There is no issue in other browsers and looking at similar bugs in Chromium, it does not appear they are amenable to suppressing the error.
I would suggest just avoiding triggering text-change in the handler for text-change. You can do this by wrapping your setText call in a _.defer
or setTimeout
.
Just noticed that this issue appears when first entering a character in the editor because of the following line of code in the setNativeRange function (which seems to be in quill.js):
selection.addRange(range);
This seems to usually happen every time a character is entered for the first time.
@R4DIC4L Did you manage to get around this issue? I am having the same problem and it seems to be cutting the first N characters of a bigger string, but only the first time you try to edit, as you described.
@GoranGjorgievski No, unfortunately I have not found any solution. I have been trying to diagnose this issue, but couldn't find out why the addRange method throws this error. Furthermore, this error cannot be caught in a try-catch block ... I actually ended up using another editor for my application.
@GoranGjorgievski No, unfortunately I have not found any solution. I have been trying to diagnose this issue, but couldn't find out why the addRange method throws this error. Furthermore, this error cannot be caught in a try-catch block ... I actually ended up using another editor for my application.
which editor did you choose? I've been having this problem and can't find a solution either.
@GoranGjorgievski No, unfortunately I have not found any solution. I have been trying to diagnose this issue, but couldn't find out why the addRange method throws this error. Furthermore, this error cannot be caught in a try-catch block ... I actually ended up using another editor for my application.
which editor did you choose? I've been having this problem and can't find a solution either.
I actually ended using draft.js, or more specifically, a React implementation of it (react-draft-wysiwyg).
i met the same question when i execute quill.setText("")
. The reason is this func will remove instantiation of the eidtor
I had the same issue using react-quill. Issue was caused by changing the value in the handler (removing extra <p><br></p>
). I solved it by creating a local state updated when value changed:
function MyEditor({ value, onChange }){
const [state, setState] = useState({ value });
useEffect(() => {
if (state.value !== value) setState({ value });
}, [value]);
return (
<Editor
value={state.rawValue || state.value || ''}
onChange={rawValue => {
const cleanedValue = rawValue.replace(/<p><br><\/p>/g, '');
setState({ rawValue, value: cleanedValue });
onChange(cleanedValue);
}}
/>
);
}
Fixed it in Angular 7 by adding below code. @ViewChild('editor') editor: Editor; setTimeout(() => { this.editor.writeValue(data); this.editor.quill.setSelection(null, data.length, null); }, 100);
For my particular use case, the solution was converting an HTML string to a delta and then using setContents
instead of using dangerouslyPasteHTML
or setting the innerHTML
of the editor.
const delta = this.clipboard.convert(html);
return this.setContents(delta);
In case it might help anyone else, I was experiencing this bug as well, and was able to fix it by removing an extra setState
in my change handler. I was tracking dirty state with a simple flag, calling a method to toggle it, and then calling a different method to change the editor value state. Once I removed the dirty tracking, the error and focus loss stopped.
天啦撸! 遇到了换行光标不移动的问题 加个setTimeout就好咯
I have a text in my Quill editor. I call setText (or deleteText) when clicking on a delete button, no problem. If I call setText (or deleteText) in the "text-change" callback , there is this error in console : "The given range isn't in document."
Steps for Reproduction
I expect no error in console for this operation.
Quill 1.1.5 Mac OSX 10.11.5 Chrome Version 54.0.2840.98
In Quill 1.0.6, we can reproduce the same error, but to do that, we need to have a break line in the text.