QuillJS pasteHTMLが正しく機能していない

Question

私はquillツールバーでpasteHTML（）を使用するカスタムボタンを持っています。ボタンを2回クリックすると、「未定義のプロパティ 'pasteHTML'を読み取ることができません」というエラーが表示されます。 https://codepen.io/Graphettion/pen/OxezbO

タイプのテキストに再現

ため

ステップ

1. ゴーエディタ
2. に二回

注]ボタンをクリックしてください：ときJSの設定（コグホイール）の下でcodepenでJavaScriptのプリプロセッサをbabelに切り替えると動作します。なぜこれが正しいのか分かりません。

予想される動作： エディタはテキストビューのプレビューに戻る必要があります。

実際の動作： 「未定義のプロパティ 'pasteHTML'を読み取ることができません」というエラーが表示されます。

プラットフォーム： のWindows 10、クロームv62.0.3202.75、FF v54.0.1、エッジv15.15063

バージョン：このチャンクで クイル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, "Courier New", 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