<div class="container my-4">

      <p>

        <strong>Bootstrap WYSIWYG editor stands for "What You See Is What You Get"</strong>

      </p>

​

      <p>You can include the wysiwyg editor in your pages with our <a href="https://mdbootstrap.com/docs/standard/plugins/wysiwyg-editor/">WYSIWYG editor plugin</a>

​

        <hr />

​

        <p>

          You will <strong>find the code structure for this example in the tabs on the left</strong>. For even

          <strong>more examples, resources & customization options</strong> click the red <button

            class="btn btn-danger btn-sm">DOCS</button> button in the upper left corner.

        </p>

​

        <div class="border p-5 mb-5">

          <!-- Copy this code to have a working example -->

          <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.png" 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>

          <!--/ Copy this code to have a working example -->

        </div>

​

    </div>