<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;
    }

    // TinyMCE Workflow Starter Config
    // Quick start video - https://www.youtube.com/watch?v=ApN8R43PKvA

    // Since we are using more than one editor, we can create common config
    // options to be shared between both editor instances
    let commonConfig = {

      // Tip - To keep TinyMCE lean, only include the plugins you need
      plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",

      // Hide the menubar to keep the editor minimal
      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#menubar
      menubar: false,

      // Enable inline mode
      // https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
      inline: true,

      // Make the inline toolbar not disappear when the editor blurs
      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_persist
      toolbar_persist: true,

      // Customize the look and feel of the UI using premium skins and icons.
      // https://www.tiny.cloud/docs/tinymce/6/editor-icons/
      // https://www.tiny.cloud/docs/tinymce/6/editor-skin/
      //
      // The icons and skin options are disabled by default in this config, but can 
      // be enabled by uncommenting the lines below. In order for them to load properly,
      // you must be on a premium plan or trial, and load TinyMCE from the cloud or be
      // running a fully self-hosted deployment.
      //
      // icons: 'thin',
      // skin: 'naked',

      // Remove the manual image resizing as we're using percentage widths
      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_persist
      object_resizing: false,

      // Set the spellchecker language and make it active on load
      // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/#spellchecker_active
      spellchecker_language: 'en',
      spellchecker_active: true

    }

    // Here is the init function for the first "Description" editor
    tinymce.init({

      // Select the element(s) to add TinyMCE to using any valid CSS selector
      selector: "#editor-description-content",

      // This option allows you to specify the buttons and the order that they
      // will appear on TinyMCE's toolbar
      // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
      toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",

      // Render the toolbar in this container
      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#fixed_toolbar_container
      fixed_toolbar_container: '#editor-description-toolbar',

      // Set a placeholder to be shown when there is no content in the editor
      // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
      placeholder: "Add a description",

      // Strip down the Enhanced Image Editing toolbar to basic manipulations
      // https://www.tiny.cloud/docs/tinymce/6/editimage/#toolbar-buttons
      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) => {
        // Apply a custom class to the wrapper element when the editor gets focus
        // https://www.tiny.cloud/docs/advanced/events/
        editor.on('focus', () => {
          document.getElementById('editor-description-wrap').classList.add('enabled');
        });
      },

      // Load the common configuration options specified earlier
      ...commonConfig,
    });

    // Here is the init function for the second "Comment" editor
    tinymce.init({

      // Select the element(s) to add TinyMCE to using any valid CSS selector
      selector: "#editor-comment-content",

      // This option allows you to specify the buttons and the order that they
      // will appear on TinyMCE's toolbar.
      // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
      toolbar: "bold italic forecolor backcolor | numlist bullist | link image emoticons codesample blockquote ",

      // Set a placeholder to display a text when there are no content in the editor
      // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
      placeholder: "Add a comment...",

      // Render the toolbar in this container.
      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#fixed_toolbar_container
      fixed_toolbar_container: '#editor-comment-toolbar',

      setup: (editor) => {
          // Apply a custom class to the wrapper element when the editor gets focus
          // https://www.tiny.cloud/docs/advanced/events/
          editor.on('focus', () => {
            document.getElementById('editor-comment-wrap').classList.add('enabled');
          });
        },

      // Load the common configuration options specified earlier
      ...commonConfig,
    });

    // Save button behavior to disable the editor
    function save(id) {
      document.getElementById(id).classList.remove('enabled');
    }

    // Next step: Check out Tiny Drive for easy cloud storage of your users'
    // images and media. Integrates seamlessly with TinyMCE.
    // https://www.tiny.cloud/drive/