Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="editor">
  <div class="toolbar">
    <div class="line">
      
      <div class="box">
        <span class="btn icon smaller" data-action="bold" data-tag-name="b" title="Bold">
          <img src="https://image.flaticon.com/icons/svg/25/25432.svg">
        </span>
        <span class="btn icon smaller" data-action="italic" data-tag-name="i" title="Italic">
          <img src="https://image.flaticon.com/icons/svg/25/25392.svg">
        </span>
        <span class="btn icon smaller" data-action="underline" data-tag-name="u" title="Underline">
          <img src="https://image.flaticon.com/icons/svg/25/25433.svg">
        </span>
        <span class="btn icon smaller" data-action="strikeThrough" data-tag-name="strike" title="Strike through">
          <img src="https://image.flaticon.com/icons/svg/25/25626.svg">
        </span>
      </div>
      
      <div class="box">
        <span class="btn icon has-submenu">
          <img src="https://image.flaticon.com/icons/svg/25/25351.svg">
          <div class="submenu">
            <span class="btn icon" data-action="justifyLeft" data-style="textAlign:left" title="Justify left">
              <img src="https://image.flaticon.com/icons/svg/25/25351.svg">  
            </span>
            <span class="btn icon" data-action="justifyCenter" data-style="textAlign:center" title="Justify center">
              <img src="https://image.flaticon.com/icons/svg/25/25440.svg">  
            </span>
            <span class="btn icon" data-action="justifyRight" data-style="textAlign:right" title="Justify right">
              <img src="https://image.flaticon.com/icons/svg/25/25288.svg">  
            </span>
            <span class="btn icon" data-action="formatBlock" data-style="textAlign:justify" title="Justify block">
              <img src="https://image.flaticon.com/icons/svg/25/25181.svg">  
            </span>
          </div>
        </span>
        <span class="btn icon" data-action="insertOrderedList" data-tag-name="ol" title="Insert ordered list">
          <img src="https://image.flaticon.com/icons/svg/25/25242.svg">  
        </span>
        <span class="btn icon" data-action="insertUnorderedList" data-tag-name="ul" title="Insert unordered list">
          <img src="https://image.flaticon.com/icons/svg/25/25648.svg">  
        </span>
        <span class="btn icon" data-action="outdent" title="Outdent">
          <img src="https://image.flaticon.com/icons/svg/25/25410.svg">  
        </span>
        <span class="btn icon" data-action="indent" title="Indent">
          <img src="https://image.flaticon.com/icons/svg/25/25233.svg">  
        </span>
        
      </div>
      <div class="box">
        <span class="btn icon" data-action="insertHorizontalRule" title="Insert horizontal rule">
          <img src="https://image.flaticon.com/icons/svg/25/25232.svg">  
        </span>
      </div>
      
    </div>
    <div class="line">
      
      <div class="box">
        <span class="btn icon smaller" data-action="undo" title="Undo">
          <img src="https://image.flaticon.com/icons/svg/25/25249.svg">
        </span>
        <span class="btn icon" data-action="removeFormat" title="Remove format">
          <img src="https://image.flaticon.com/icons/svg/25/25454.svg">  
        </span>
      </div>
      
      <div class="box">
        <span class="btn icon smaller" data-action="createLink" title="Insert Link">
          <img src="https://image.flaticon.com/icons/svg/25/25385.svg">
        </span>
        <span class="btn icon smaller" data-action="unlink" data-tag-name="a" title="Unlink">
          <img src="https://image.flaticon.com/icons/svg/25/25341.svg">
        </span>
      </div>
      
      <div class="box">
        <span class="btn icon" data-action="code" title="Show HTML-Code">
          <img src="https://image.flaticon.com/icons/svg/25/25185.svg">
        </span>
      </div>
      
    </div>
  </div>
  <div class="content-area">
    <div class="visuell-view" contenteditable>
      <p style="text-align: center;">Welcome to my <b>WYSIWYG</b> Editor <i>(What you see is what you get)</i>!</p>
      <p style="text-align: center;">It's only made of <u>HTML5</u>, <i><u>CSS3</u> </i>and pure <u>JavaScript</u>, <strike>no framework</strike>!</p>
      <hr>
      <p style="text-align: center;"><b>See for yourself! 😃</b></p>
      <p style="text-align: center;"><b>Tutorial available <a href="https://webdeasy.de/en/program-your-own-wysiwyg-editor-in-10-minutes/?referer=cp-YoVmBx">here</a>! 😋</b></p>
    </div>
    <textarea class="html-view"></textarea>
  </div>
</div>

<div class="modal">
  <div class="modal-bg"></div>
  <div class="modal-wrapper">
    <div class="close">✖</div>
    <div class="modal-content" id="modalCreateLink">
      <h3>Insert Link</h3>
      <input type="text" id="linkValue" placeholder="Link (example: https://webdeasy.de/)">
      <div class="row">
        <input type="checkbox" id="new-tab">
        <label for="new-tab">Open in new Tab?</label>
      </div>
      <button class="done">Done</button>
    </div>
  </div>
</div>


<footer>
  <p>coded with ❤️ by <a href="https://webdeasy.de/?referer=cp-YoVmBx" target="_blank">webdeasy.de</a></p>
  <p>Icons made by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="https://www.flaticon.com/"                 title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/"                 title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
</footer>
              
            
!

CSS

              
                body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Helvetica Neue', 'Helvetica', arial, sans-serif;
}

/* WYSIWYG Editor */
.editor {
  width: 40rem;
  min-height: 18rem;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  border-top: 6px solid #4a4a4a;
  border-radius: 3px;
  margin: 2rem;
  
  .toolbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    
    .line {
      display: flex;
      border-bottom: 1px solid #e2e2e2;
      
      &:last-child {
        border-bottom: none;
      }
      
      .box {
        display: flex;
        border-left: 1px solid #e2e2e2; 
        
        .btn {
          display: block;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          transition: .2s ease all;

          &:hover, &.active {
            background-color: #e1e1e1;
            cursor: pointer;
          }
          
          &.icon img {
            width: 15px;
            padding: 10px;
          }
          
          &.icon.smaller img {
            width: 12px;
          }
          
          &.has-submenu {
            width: 20px;
            padding: 0 10px;
            
            &::after {
              content: '';
              width: 6px;
              height: 6px;
              position: absolute;
              background-image: url(https://image.flaticon.com/icons/svg/25/25243.svg);
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              right: 4px;
            }
            
            .submenu {
              display: none;
              position: absolute;
              top: 36px;
              left: -1px;
              z-index: 10;
              background-color: #FFF;
              border: 1px solid #b5b5b5;
              border-top: none;
              
              .btn {
                width: 39px;
              }
              
              &:hover {
                display: block;
              }
            }
            
            &:hover .submenu {
              display: block;
            }
          }
        }  
      }
    }
  }
  
  .content-area {
    padding: 15px 12px;
    line-height: 1.5;
    
    .visuell-view {
      outline: none;
      
      p {
        margin: 12px 0;
      } 
    }
    
    .html-view {
      outline: none;
      display: none;
      width: 100%;
      height: 200px;
      border: none;
      resize: none;
    }
  }
}


/* Modal */
.modal {
  z-index: 40;
  display: none;
  
  .modal-wrapper {
    background-color: #FFF;
    padding: 1rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20rem;
    min-height: 10rem;
    z-index: 41;
    
    .close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
    }
    
    .modal-content {
      flex-direction: column;
      
      h3 {
        margin-top: 0;
      }
        
      input {
        margin: 1rem 0;
        padding: .5rem;
      }
      
      input[type="text"] {
        width: calc(100% - 1rem);
      }
      
      .row {
        
        label {
          margin-left: .5rem;
        }
      }
      
      button {
        background-color: #D2434F;
        border: 0;
        color: #FFF;
        padding: .5rem 1.2rem;
        cursor: pointer;
      } 
    }
  }
  
  .modal-bg {
    position: fixed;
    background-color: rgba(0, 0, 0, .3);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }
}

/* Codepen Footer */
footer {
  position: fixed;
  bottom: 0;
  display: flex;
  
  p {
    margin: 0.5rem 1rem;
    font-size: 12px;
  }
  
  a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
  }
}
              
            
!

JS

              
                // define vars
const editor = document.getElementsByClassName('editor')[0];
const toolbar = editor.getElementsByClassName('toolbar')[0];
const buttons = toolbar.querySelectorAll('.btn:not(.has-submenu)');
const contentArea = editor.getElementsByClassName('content-area')[0];
const visuellView = contentArea.getElementsByClassName('visuell-view')[0];
const htmlView = contentArea.getElementsByClassName('html-view')[0];
const modal = document.getElementsByClassName('modal')[0];

// add active tag event
document.addEventListener('selectionchange', selectionChange);

// add toolbar button actions
for(let i = 0; i < buttons.length; i++) {
  let button = buttons[i];
  
  button.addEventListener('click', function(e) {
    let action = this.dataset.action;
    
    switch(action) {
      case 'code':
        execCodeAction(this, editor);
        break;
      case 'createLink':
        execLinkAction();
        break;
      default:
        execDefaultAction(action);
    }
    
  });
}

// this function toggles between visual and html view
function execCodeAction(button, editor) {

  if(button.classList.contains('active')) { // show visuell view
    visuellView.innerHTML = htmlView.value;
    htmlView.style.display = 'none';
    visuellView.style.display = 'block';

    button.classList.remove('active');     
  } else {  // show html view
    htmlView.innerText = visuellView.innerHTML;
    visuellView.style.display = 'none';
    htmlView.style.display = 'block';

    button.classList.add('active'); 
  }
}

// add link action
function execLinkAction() {  
  modal.style.display = 'block';
  let selection = saveSelection();

  let submit = modal.querySelectorAll('button.done')[0];
  let close = modal.querySelectorAll('.close')[0];
  
  // done button active => add link
  submit.addEventListener('click', function() {
    let newTabCheckbox = modal.querySelectorAll('#new-tab')[0];
    let linkInput = modal.querySelectorAll('#linkValue')[0];
    let linkValue = linkInput.value;
    let newTab = newTabCheckbox.checked;    
    
    restoreSelection(selection);
    
    if(window.getSelection().toString()) {
      let a = document.createElement('a');
      a.href = linkValue;
      if(newTab) a.target = '_blank';
      window.getSelection().getRangeAt(0).surroundContents(a);
    }

    modal.style.display = 'none';
    linkInput.value = '';
    
    // deregister modal events
    submit.removeEventListener('click', arguments.callee);
    close.removeEventListener('click', arguments.callee);
  });  
  
  // close modal on X click
  close.addEventListener('click', function() {
    let linkInput = modal.querySelectorAll('#linkValue')[0];
    
    modal.style.display = 'none';
    linkInput.value = '';
    
    // deregister modal events
    submit.removeEventListener('click', arguments.callee);
    close.removeEventListener('click', arguments.callee);
  });
}

// executes normal actions
function execDefaultAction(action) {
  document.execCommand(action, false);
}

// saves the current selection
function saveSelection() {
    if(window.getSelection) {
        sel = window.getSelection();
        if(sel.getRangeAt && sel.rangeCount) {
            let ranges = [];
            for(var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
            return ranges;
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

// loads a saved selection
function restoreSelection(savedSel) {
    if(savedSel) {
        if(window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            for(var i = 0, len = savedSel.length; i < len; ++i) {
                sel.addRange(savedSel[i]);
            }
        } else if(document.selection && savedSel.select) {
            savedSel.select();
        }
    }
}

// sets the current format buttons active/inactive
function selectionChange() {
  
  for(let i = 0; i < buttons.length; i++) {
    let button = buttons[i];
    button.classList.remove('active');
  }
  
  parentTagActive(window.getSelection().anchorNode.parentNode);
}

function parentTagActive(elem) {
  if(elem.classList.contains('visuell-view')) return false;
  
  let toolbarButton;
  
  // active by tag names
  let tagName = elem.tagName.toLowerCase();
  toolbarButton = document.querySelectorAll(`.toolbar .btn[data-tag-name="${tagName}"]`)[0];
  if(toolbarButton) {
    toolbarButton.classList.add('active');
  }
  
  // active by text-align
  let textAlign = elem.style.textAlign;
  toolbarButton = document.querySelectorAll(`.toolbar .btn[data-style="textAlign:${textAlign}"]`)[0];
  if(toolbarButton) {
    toolbarButton.classList.add('active');
  }
  
  return parentTagActive(elem.parentNode);
}
              
            
!
999px

Console