surmon-china / vue-quill-editor

@quilljs editor component for @vuejs(2)
https://github.surmon.me/vue-quill-editor
MIT License
7.38k stars 1.03k forks source link

Editor may conflit with browser extensions that modify DOM, but solution is simple. #307

Open SpaceOyster opened 5 years ago

SpaceOyster commented 5 years ago

line 108 in file src/editor.vue

// 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 })
})
wosubtil commented 5 years ago

@SpaceOyster pull request please!