Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
SpaceOyster opened this issue Feb 12, 2019 · 1 comment

Comments

@SpaceOyster
Copy link

SpaceOyster commented Feb 12, 2019

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
Copy link

@SpaceOyster pull request please!

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants