Simple WYSIWYG Editor using JavaScript

by
Simple WYSIWYG Editor using JavaScript
Code Snippet:WYSIWYG Editor
Author: WebDEasy
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 5,286
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (8 KB)

This JavaScript code snippet helps you to create a simple WYSIWYG rich text editor with all basic commands.  It is purely built with HTML5, CSS, and JavaScript without using an additional library or framework. This text editor allows users to apply bold, italic, underline, and deleted formats to the text. Similarly, users can create lists, headings, and links and apply text-indent and alignments.

You can easily integrate this text editor into your web/app project to allow users to create formatted text. The interface of the WYSIWYG text editor can be customized with additional CSS according to your needs.

How to Create Simple WYSIWYG Editor using JavaScript

1. First of all, create the HTML structure as follows:

  <div class="wp-webdeasy-comment-editor">
  <div class="toolbar">
    <div class="line">
      
      <div class="box">
        <span class="editor-btn icon smaller" data-action="bold" data-tag-name="b" title="Bold">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/bold.png"/>
        </span>
        <span class="editor-btn icon smaller" data-action="italic" data-tag-name="i" title="Italic">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/italic.png"/>
        </span>
        <span class="editor-btn icon smaller" data-action="underline" data-tag-name="u" title="Underline">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/underline.png"/>
        </span>
        <span class="editor-btn icon smaller" data-action="strikeThrough" data-tag-name="strike" title="Strike through">
          <img src="https://img.icons8.com/fluency-systems-filled/30/000000/strikethrough.png"/>
        </span>
      </div>
      
      <div class="box">
        <span class="editor-btn icon has-submenu">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/align-left.png"/>
          <div class="submenu">
            <span class="editor-btn icon" data-action="justifyLeft" data-style="textAlign:left" title="Justify left">
              <img src="https://img.icons8.com/fluency-systems-filled/48/000000/align-left.png"/>
            </span>
            <span class="editor-btn icon" data-action="justifyCenter" data-style="textAlign:center" title="Justify center">
              <img src="https://img.icons8.com/fluency-systems-filled/48/000000/align-center.png"/>
            </span>
            <span class="editor-btn icon" data-action="justifyRight" data-style="textAlign:right" title="Justify right">
              <img src="https://img.icons8.com/fluency-systems-filled/48/000000/align-right.png"/>
            </span>
            <span class="editor-btn icon" data-action="formatBlock" data-style="textAlign:justify" title="Justify block">
              <img src="https://img.icons8.com/fluency-systems-filled/48/000000/align-justify.png"/>
            </span>
          </div>
        </span>
        <span class="editor-btn icon" data-action="insertOrderedList" data-tag-name="ol" title="Insert ordered list">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/numbered-list.png"/>
        </span>
        <span class="editor-btn icon" data-action="insertUnorderedList" data-tag-name="ul" title="Insert unordered list">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/bulleted-list.png"/>
        </span>
        <span class="editor-btn icon" data-action="outdent" title="Outdent" data-required-tag="li">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/outdent.png"/>
        </span>
        <span class="editor-btn icon" data-action="indent" title="Indent">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/indent.png"/>
        </span>
        
      </div>
      <div class="box">
        <span class="editor-btn icon" data-action="insertHorizontalRule" title="Insert horizontal rule">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/horizontal-line.png"/>
        </span>
      </div>
      
    </div>
    <div class="line">
      
      <div class="box">
        <span class="editor-btn icon smaller" data-action="undo" title="Undo">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/undo--v1.png"/>
        </span>
        <span class="editor-btn icon" data-action="removeFormat" title="Remove format">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/remove-format.png"/>
        </span>
      </div>
      
      <div class="box">
        <span class="editor-btn icon smaller" data-action="createLink" title="Insert Link">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/add-link.png"/>
        </span>
        <span class="editor-btn icon smaller" data-action="unlink" data-tag-name="a" title="Unlink">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/delete-link.png"/>
        </span>
      </div>
      
      <div class="box">
        <span class="editor-btn icon" data-action="toggle-view" title="Show HTML-Code">
          <img src="https://img.icons8.com/fluency-systems-filled/48/000000/source-code.png"/>
        </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>

2. After that, add the following CSS styles to your project.

/* WYSIWYG Editor */
.wp-webdeasy-comment-editor {
 background: #fff;
  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 auto;
}
.wp-webdeasy-comment-editor .toolbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.wp-webdeasy-comment-editor .toolbar .line {
  display: flex;
  border-bottom: 1px solid #e2e2e2;
}
.wp-webdeasy-comment-editor .toolbar .line:last-child {
  border-bottom: none;
}
.wp-webdeasy-comment-editor .toolbar .line .box {
  display: flex;
  border-left: 1px solid #e2e2e2;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn {
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.2s ease all;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn:hover, .wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.active {
  background-color: #e1e1e1;
  cursor: pointer;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.icon img {
  width: 15px;
  padding: 9px;
  box-sizing: content-box;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.icon.smaller img {
  width: 16px;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu {
  width: 20px;
  padding: 0 10px;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu::after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  background-image: url(https://img.icons8.com/ios-glyphs/30/000000/chevron-down.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  right: 4px;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 34px;
  left: -1px;
  z-index: 10;
  background-color: #FFF;
  border: 1px solid #b5b5b5;
  border-top: none;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu .btn {
  width: 39px;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu:hover {
  display: block;
}
.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu:hover .submenu {
  display: block;
}
.wp-webdeasy-comment-editor .content-area {
  padding: 15px 12px;
  line-height: 1.5;
}
.wp-webdeasy-comment-editor .content-area .visuell-view {
  outline: none;
  min-height: 12rem;
}
.wp-webdeasy-comment-editor .content-area .visuell-view p {
  margin: 12px 0;
}
.wp-webdeasy-comment-editor .content-area .html-view {
  outline: none;
  display: none;
  width: 100%;
  height: 200px;
  border: none;
  resize: none;
}

/* Modal */
.modal {
  z-index: 40;
  display: none;
}
.modal .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;
}
.modal .modal-wrapper .close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}
.modal .modal-wrapper .modal-content {
  flex-direction: column;
}
.modal .modal-wrapper .modal-content h3 {
  margin-top: 0;
}
.modal .modal-wrapper .modal-content input {
  margin: 1rem 0;
  padding: 0.5rem;
}
.modal .modal-wrapper .modal-content input[type=text] {
  width: calc(100% - 1rem);
}
.modal .modal-wrapper .modal-content .row label {
  margin-left: 0.5rem;
}
.modal .modal-wrapper .modal-content button {
  background-color: #D2434F;
  border: 0;
  color: #FFF;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
}
.modal .modal-bg {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

3. Finally, add the following JavaScript code and done.

// define vars
const editor = document.getElementsByClassName('wp-webdeasy-comment-editor')[0];
const toolbar = editor.getElementsByClassName('toolbar')[0];
const buttons = toolbar.querySelectorAll('.editor-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 paste event
visuellView.addEventListener('paste', pasteEvent);

// add paragraph tag on new line
contentArea.addEventListener('keypress', addParagraphTag);

// 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 'toggle-view':
        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'); 
  }
}

/**
 * This function adds a link to the current selection
 */
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(e) {
    e.preventDefault();
    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(e) {
    e.preventDefault();
    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);
  });
}

/**
 * This function executes all '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 selected format buttons active/inactive
 */ 
function selectionChange(e) {
  
  for(let i = 0; i < buttons.length; i++) {
    let button = buttons[i];
    
    // don't remove active class on code toggle button
    if(button.dataset.action === 'toggle-view') continue;
    
    button.classList.remove('active');
  }
  
  if(!childOf(window.getSelection().anchorNode.parentNode, editor)) return false;
  
  parentTagActive(window.getSelection().anchorNode.parentNode);
}

/**
 * Checks if the passed child has the passed parent
 */
function childOf(child, parent) {
  return parent.contains(child);
}

/**
 * Sets the tag active that is responsible for the current element
 */
function parentTagActive(elem) {
  if(!elem ||!elem.classList || elem.classList.contains('visuell-view')) return false;
  
  let toolbarButton;
  
  // active by tag names
  let tagName = elem.tagName.toLowerCase();
  toolbarButton = document.querySelectorAll(`.toolbar .editor-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 .editor-btn[data-style="textAlign:${textAlign}"]`)[0];
  if(toolbarButton) {
    toolbarButton.classList.add('active');
  }
  
  return parentTagActive(elem.parentNode);
}

/**
 * Handles the paste event and removes all HTML tags
 */
function pasteEvent(e) {
  e.preventDefault();
  
  let text = (e.originalEvent || e).clipboardData.getData('text/plain');
  document.execCommand('insertHTML', false, text);
}

/**
 * This functions adds a paragraph tag when the enter key is pressed
 */
function addParagraphTag(evt) {
  if (evt.keyCode == '13') {
    
    // don't add a p tag on list item
    if(window.getSelection().anchorNode.parentNode.tagName === 'LI') return;
    document.execCommand('formatBlock', false, 'p');
  }
}

That’s all! hopefully, you have successfully integrated this WYSIWYG text editor code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X