Question

我有一个在主播工具栏中使用pasteHTML（）的自定义按钮。当我单击按钮两次时，我收到一条错误消息，“无法读取未定义的属性'pasteHTML'。”

复制步骤

转到https://codepen.io/Graphettion/pen/OxezbO
在编辑器中输入文字
点击两次按钮

注意：在我将JavaScript预处理器切换到babel时，在JS设置（cog wheel）下的codepen中，它可以工作。不确定为什么会这样。

预期行为：编辑器应切换回预览文本视图。

实际行为：它给出了一个错误，说“无法读取未定义的属性'pasteHTML'。”

平台： Windows 10，Chrome v62.0.3202.75，FF v54.0.1，Edge v15.15063

版本： Quill v1.3.3

// Code Preview
function showHtml() {
  const txtArea = document.createElement('textarea')
  txtArea.style.cssText = "width: 100%;margin: 0px;background: rgb(29, 29, 29);box-sizing: border-box;color: rgb(204, 204, 204);font-size: 15px;outline: none;padding: 20px;line-height: 24px;font-family: Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;position: absolute;top: 0;bottom: 0;border: none;display:none"

  const htmlEditor = quill.addContainer('ql-custom')
  htmlEditor.appendChild(txtArea)

  const myEditor = document.querySelector('#editor')
  quill.on('text-change', (delta, oldDelta, source) => {
    const html = myEditor.children[0].innerHTML
    txtArea.value = html

    document.querySelector('.text-output').innerHTML = html
    document.getElementById('html-output').innerText = html
  })

  const customButton = document.querySelector('.ql-showHtml');
  customButton.addEventListener('click', function() {
    if (txtArea.style.display === '') {
      const html = txtArea.value
      this.quill.pasteHTML(html)
    }
    txtArea.style.display = txtArea.style.display === 'none' ? '' : 'none'
  })
}

Answer 1

在这个块中

customButton.addEventListener('click', function() {
    if (txtArea.style.display === '') {
      const html = txtArea.value
      this.quill.pasteHTML(html)
    }
    txtArea.style.display = txtArea.style.display === 'none' ? '' : 'none'
  })

当您尝试引用this.quill时，this将引用customButton

QuillJS pasteHTML无法正常工作

1 个答案: