Basic WYSIWYG Editor In Pure JavaScript – Editor.js

Category: Javascript , Text | February 27, 2019
Author: Atulin
Views Total: 138
Official Page: Go to website
Last Update: February 27, 2019
License: LGPL-3.0


Basic WYSIWYG Editor In Pure JavaScript – Editor.js


Editor.js is a lightweight basic WYSIWYG Html/Text editor created using pure JavaScript and CSS.


  • Clear formatting
  • Insert header
  • Italic
  • Bold
  • Underline
  • Strikethrough
  • Unordered list
  • Ordered list
  • Insert Youtube Video
  • Insert Gfycat Video
  • Insert image
  • Insert horizontal line

How to use it:

Load the stylesheet editor.min.css and editor.min.js in the document.

<link rel="stylesheet" href="css/editor.min.css">
<script src="js/editor.min.js"></script>

Create the HTML for the WYSIWYG editor. Note that the editor requires a contentEditable element to work.

<div id="editor">
  <div id="tools">
    <button title="Clear formatting" id="clear">C</button>
    <button title="Insert header" id="heading">H</button>
    <button title="Italic" id="italics">I</button>
    <button title="Bold" id="bold">B</button>
    <button title="Underline" id="underline">U</button>
    <button title="Strikethrough" id="strikethrough">S</button>
    <button title="Unordered list" id="ul">ul</button>
    <button title="Ordered list" id="ol">ol</button>
    <button title="Insert video" id="video">vid</button>
    <button title="Insert image" id="image">img</button>
    <button title="Insert Gfycat" id="gfy">gfy</button>
    <button title="Insert horizontal line" id="hr">hr</button>
  <div id="input" contenteditable="true"></div>

You Might Be Interested In:

Leave a Reply