document.execCommand

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.2/quill.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css"
  rel="stylesheet"
/>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<div class="main container">
  <form method="post" action="save.php" onsubmit="return submitQuill();">
    <input type="hidden" name="content" id="content" />

    <div id="toolbar">
      <div class="row">
        <div class="separator" title="Text Style">
          <select class="ql-font"></select>
          <select class="ql-size"></select>
        </div>

        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button class="ql-strike"></button>

        <select class="ql-color"></select>
        <select class="ql-background"></select>

        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>

        <button class="ql-header" value="1"></button>
        <button class="ql-header" value="2"></button>
        <button class="ql-blockquote"></button>
        <button class="ql-code-block"></button>

        <button class="ql-list" value="ordered"></button>
        <button class="ql-list" value="bullet"></button>
        <button class="ql-list" value="check"></button>

        <button class="ql-indent" value="-1"></button>
        <button class="ql-indent" value="+1"></button>

        <button class="ql-direction" value="rtl"></button>
        <select class="ql-align"></select>

        <button class="ql-link"></button>
        <button class="ql-image"></button>
        <button class="ql-video"></button>

        <button class="ql-clean"></button>
      </div>
   ...

CSS

html,body {
  color: #454545;
}

.main.container {
  margin-top: 5%;
}

.textarea {
  background: #EEEEEE;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 20px 30px;
  width: 100%;
}

.separator {
  border-right: 10px solid #CCCCCC;
  margin-right: 1%;
}

JavaScript

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: '#toolbar'
    }
});