<main>
    <label class="editor-label">Description</label>
    <div class="editor-wrap" id="editor-description-wrap">
      <div class="editor-toolbar" id="editor-description-toolbar"></div>
      <div class="editor-content" id="editor-description-content">
        <h2><strong>What&rsquo;s your rich text editor </strong><strong>workflow</strong><strong> project?&nbsp;</strong></h2>
        <p>Are you&hellip;</p>
        <ul>
          <li><strong>Building a new workflow or project management platform</strong> and need to add rich text editing functionality?</li>
          <li><strong>Extending your existing workflow or project management app</strong> and need to enhance your default editor?</li>
        </ul>
        <p>Then use the only WYSIWYG editor that&rsquo;s trusted by 1.5M developers.</p>
        <h3><strong>Curious about TinyMCE?</strong></h3>
        <p>Click inside this box to activate the editor and see how it works!</p>
      </div>
      <footer class="editor-footer">
        <button type="button" id="save-description-btn" onclick="save('editor-description-wrap')" class="editor-save-btn">Save</button>
        <button type="button" onclick="alert('Your own custom Cancel function')" class="editor-cancel-btn">Cancel</button>
      </footer>
    </div>

    <label class="editor-label">Comments</label>
    <div class="comment">
      <div class="avatar">FD</div>
      <div class="editor-wrap" id="editor-comment-wrap">
        <div class="editor-content" id="editor-comment-content"></div>
        <div class="editor-toolbar" id="editor-comment-toolbar"></div>
        <footer class="editor-footer">
          <button type="button" id="save-description-btn" onclick="alert('Your own custom Save function')" class="editor-save-btn">Save</button>
          <button type="button" onclick="alert('Your own custom Cancel function')" class="editor-cancel-btn">Cancel</button>
        </footer>
      </div>
    </div>
  </main>

body {
      margin: 2rem .5rem;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    main {
      max-width: 720px;
      margin: auto;
    }

    .editor-wrap.enabled {
      border-radius: 3px;
      border: 1px solid #ccc;
    }

    .editor-content {
      transition: min-height .25s, padding-bottom .25s;
      min-height: 0;
      outline: none;
      border-radius: 1px;
      transition: box-shadow .15s, background-color .15s;
    }

    .editor-content > *:first-child {
      margin-top: 0;
    }

    .editor-content > *:last-child {
      margin-bottom: 0;
    }

    .editor-wrap#editor-description-wrap:hover:not(.enabled) .editor-content {
      background-color: #efefef;
      box-shadow: 0 0 0 6px #efefef;
    }

    .editor-wrap.enabled .editor-content {
      min-height: 55px;
      padding: 1rem;
    }

    .editor-toolbar {
      padding: 3px;
      display: none;
      border-bottom: 1px solid #ccc;
      z-index: 1;
    }

    .editor-wrap.enabled .editor-toolbar {
      display: block;
    }

    .editor-footer {
      margin: 1rem;
      display: none;
    }

    .editor-wrap.enabled .editor-footer {
      display: block;
    }

    .editor-save-btn {
      background: #207ab7;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      border: none;
      outline: none;
      height: 34px;
      line-height-step: 34px;
      padding: 0 16px;
      border-radius: 4px;
      margin: 0;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-user-select: none;
    }

    .editor-cancel-btn {
      background: #dfe3ec;
      font-size: 16px;
      font-weight: bold;
      color: #17224f;
      border: none;
      outline: none;
      height: 34px;
      line-height-step: 34px;
      padding: 0 16px;
      border-radius: 4px;
      margin: 0;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-user-select: none;
    }

    .editor-label {
      font-size: 19px;
      margin: 2rem 0 1rem;
      display: block;
    }

    .comment {
      display: flex;
    }

    .avatar {
      background-color: #ff9999;
      color: #17224f;
      font-size: 18px;
      font-weight: bold;
      border-radius: 100px;
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      margin-right: 1rem;
    }

    .editor-wrap#editor-comment-wrap {
      border: 1px solid #ccc;
      border-radius: 3px;
      flex-grow: 1;
    }

    .editor-wrap#editor-comment-wrap .editor-content {
      padding: 1rem;
    }

    /* Below are the content styles, in this case they are global */
    /* and not namespaced to `.editor-content` */
    a,
    a:link {
      color: blue;
    }
    a:visited {
      color: purple;
    }
    a:hover {
      color: green;
    }
    a:active {
      color: red;
    }

    h1 {
      font-size: 1.75rem;
      font-weight: strong;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: strong;
    }

    h3 {
      font-size: 1rem;
      font-weight: strong;
    }

    hr {
      margin: 1.5rem 0;
      padding: .5rem 0;
      border: 0;
    }

    hr::after {
      content: '';
      display: block;
      border-width: 0 0 1px 0;
      border-color: #ccc;
      border-style: solid;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    /* Remove borders from toolbar - delete this rule if using premium skins and icons */
    .editor-toolbar .tox.tox-tinymce-inline .tox-editor-header {
      border: none;
    }

    /* Indent placeholder in custom-styled comment editor */
    #editor-comment-wrap .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
      left:inherit;
    }

let commonConfig = {
  plugins:
    "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
  menubar: false,
  inline: true,
  toolbar_persist: true,
  object_resizing: false,
  spellchecker_language: "en",
  spellchecker_active: true
};

tinymce.init({
  selector: "#editor-description-content",
  toolbar:
    "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
  fixed_toolbar_container: "#editor-description-toolbar",
  placeholder: "Add a description",
  editimage_toolbar: "rotateleft rotateright",
  codesample_global_prismjs: true,
  codesample_languages: [
    { text: "HTML/XML", value: "markup" },
    { text: "JavaScript", value: "javascript" },
    { text: "CSS", value: "css" },
    { text: "LESS", value: "less" },
    { text: "PHP", value: "php" },
    { text: "SQL", value: "sql" }
  ],

  setup: (editor) => {
    editor.on("focus", () => {
      document
        .getElementById("editor-description-wrap")
        .classList.add("enabled");
    });
  },
  ...commonConfig
});

tinymce.init({
  selector: "#editor-comment-content",
  toolbar:
    "bold italic forecolor backcolor | numlist bullist | link image emoticons codesample blockquote ",
  placeholder: "Add a comment...",
  fixed_toolbar_container: "#editor-comment-toolbar",

  setup: (editor) => {
    editor.on("focus", () => {
      document.getElementById("editor-comment-wrap").classList.add("enabled");
    });
  },

  ...commonConfig
});

function save(id) {
  document.getElementById(id).classList.remove("enabled");
}