<div class="wysiwyg" data-mdb-wysiwyg="wysiwyg">

  <br/>

  <p style="text-align: center;"><img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid"></p>

  <h1 style="text-align: center;">MDBootstrap</h1>

  <p style="text-align: center;">WYSIWYG Editor</p>

  <p style="text-align: center;"><a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a>&nbsp;© 2020</p>

  <p style="text-align: left;"><b>Features:</b></p>

  <ul>

    <li>Changing block type</li>

    <li>Text formatting (bold, italic, strikethrough, underline)</li>

    <li>Setting text color</li>

    <li>Setting color highlight</li>

    <li>Text aligning</li>

    <li>Creating a list (bulled or numbered)</li>

    <li>Increase/Decrease indent</li>

    <li>Inserting links</li>

    <li>Inserting pictures</li>

    <li>Insert horizontal line</li>

    <li>show HTML code</li>

    <li>Undo/Redo</li>

  </ul>

  <p><b>Options:</b></p>

  <ul>

    <li>Translations</li>

    <li>Using your own color palette</li>

    <li>Disabling/enabling sections</li>

  </ul>

  <p><b>Methods:</b></p>

  <ul>

    <li>Get HTML code from editor</li>

  </ul>

</div>

​

const wysiwygEl = document.querySelector('.wysiwyg');

wysiwygEl.addEventListener('contextmenu', () => {

  console.log('contextmenu')

})

​

wysiwygEl.addEventListener('paste', () => {

  console.log('paste')

})