CodePen Embed - Project Management Platform

<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">
      <p>In the admin panel, create a screen to identify employee records with malformed email addresses, so HR teams can update them.</p>
      <p><strong>SQL query provided by DB Admin:</strong></p>
      <pre class="language-sql"><code>SELECT
FirstName, LastName, Team, Email
FROM
Employee
where NOT REGEXP_LIKE(Email, &lsquo;[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}&rsquo;, &lsquo;i&rsquo;);</code></pre>
      <p><strong>Sub-tasks:</strong></p>
      <ul class="tox-checklist">
        <li class="tox-checklist--checked">Tech spec</li>
        <li class="tox-checklist--checked">Database query</li>
        <li>Implement screen</li>
        <li>QA/Testing</li>
      </ul>
      <p><strong>Key Stakeholders:</strong></p>
      <table style="border-collapse: collapse; width: 100%;" border="1">
        <colgroup>
          <col style="width: 33.2362%;">
          <col style="width: 33.2362%;">
          <col style="width: 33.2362%;">
        </colgroup>
        <tbody>
          <tr>
            <td><strong>Stakeholder</strong></td>
            <td><strong>Job Title</strong></td>
            <td><strong>Role</strong></td>
          </tr>
          <tr>
            <td>James Carr</td>
            <td>Product Manager</td>
            <td>Accountable</td>
          </tr>
          <tr>
            <td>Valerie Mack</td>
            <td>Full Stack Engineer</td>
            <td>Responsible</td>
          </tr>
          <tr>
            <td>Tim Bird</td>
            <td>Customer Success</td>
            <td>Consult</td>
          </tr>
        </tbody>
      </table>
    </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 0.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 0.25s, padding-bottom 0.25s;
  min-height: 0;
  outline: none;
  border-radius: 1px;
  transition: box-shadow 0.15s, background-color 0.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;
  font-weight: bold;
  color: #333;
}

.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: 0.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 editor */
#editor-comment-wrap
  .mce-content-body:not([dir="rtl"])[data-mce-placeholder]:not(.mce-visualblocks)::before,
#editor-description-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/

This Pen is owned by TinyMCE on CodePen.

See more by @tinymce on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.