// Update model if text changes
this.quill.on('text-change', (delta, oldDelta, source) => {
let html = this.$refs.editor.children[0].innerHTML // <-- THIS LINE
console.log(html)
const quill = this.quill
const text = this.quill.getText()
if (html === '<p><br></p>') html = ''
this._content = html
this.$emit('input', this._content)
this.$emit('change', { html, text, quill })
})
If a browser extension (for example LanguageTool) prepends some DOM Element to .ql-container, this line of code above will refer to wrong Element.
LanguageTool makes this:
<div class="quill-editor ql-container ql-snow" content="">
<!-- This Element is prepended by LanguageTool Extension -->
<lt-highlighter style="z-index: 1;" contenteditable="false">
<lt-div spellcheck="false" class="lt-highlighter__wrapper" style="width: 914px; height: 591.2px;">
<canvas class="lt-highlighter__canvas" style="margin-top: 0px !important; margin-left: 0px !important;" width="914" height="591"></canvas>
</lt-div>
</lt-highlighter>
<!-- this.$refs.editor.children[0] will refer to lt-highlighter element now instead of div.ql-editor -->
<div class="ql-editor ql-blank" data-gramm="false" data-placeholder="Текст сообщения..." spellcheck="false" contenteditable="true">
<p><br></p>
</div>
<div class="ql-clipboard" tabindex="-1" contenteditable="true"></div>
<div class="ql-tooltip ql-hidden">
<a class="ql-preview" target="_blank" href="about:blank"></a>
<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">
<a class="ql-action"></a>
<a class="ql-remove"></a>
</div>
</div>
Suggested solution:
// Update model if text changes
this.quill.on('text-change', (delta, oldDelta, source) => {
let html = this.$refs.editor.querySelector(".ql-editor").innerHTML // <-- change 108 line like this
// this.$refs.editor refers to div.quill-editor.ql-container.ql-snow
console.log(html)
const quill = this.quill
const text = this.quill.getText()
if (html === '<p><br></p>') html = ''
this._content = html
this.$emit('input', this._content)
this.$emit('change', { html, text, quill })
})
line 108 in file src/editor.vue
If a browser extension (for example LanguageTool) prepends some DOM Element to
.ql-container
, this line of code above will refer to wrong Element.LanguageTool makes this:
Suggested solution: