​

// simulate dynamic creation of an element

document.body.insertAdjacentHTML('beforeend', `<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 wysiwygElement = document.querySelector('.wysiwyg');

const wysiwygInstance = new WYSIWYG(wysiwygElement)