A simplistic medium style blog WYSIWYG editor for website.

Download as .zip Download as .tar.gz View on GitHub

A simplistic medium style blog WYSIWYG editor for website.

Live URL

Blogpad icon logo



<link rel="stylesheet" href="[email protected]/dist/blogpad.min.css"/>
<script defer src="[email protected]/dist/blogpad.umd.js"></script>
npm install blogpad

Getting Started

  <textarea id="id_content"></textarea>
// on window load
window.onload = function () {
  // create a new blogpad instance
  let pad = new blogpad();
  // initialize textarea as blogpad editor
    textarea: document.getElementById("id_content"),
    toolbar: true,
    heading: true,

Toolbar Actions

Action Description
bold Make selected text bold
italic Make selected text italic
underline Underline selected text
justifyLeft Justify selected content to left
justifyCenter Justify selected content to center
justifyRight Justify selected content to right
foreColor Create a basic color pallete which color foreground
backColor Create a basic color pallete which color background
insertHeading Insert a H3 tag below the selected paragraph, can be used for subheadings in blogs
textSize Change font size of selected text, repeated clicks on this action button will cycle through different sizes
createLink Convert selected text into a link
subscript Subscript selected text
superscript Superscript selected text
strikeThrough Create a strike line in selected text
insertCode Insert code bar to write some code in blog
insertImage Insert an image from link provided
insertHorizontalRule Insert a horizontal line to seperate blog sections

API Reference

Blogpad Top-Level API

blogpad is entry point to the Blogpad library. The top-level APIs are available on the blogpad global. If you use ES6 with npm, you can write import blogpad from 'blogpad'. If you use ES5 with npm, you can write var blogpad = require('blogpad')

Creating a new blogpad instance

blogpad abstracts all the editor functionalities, we need to create an instance of blogpad in order to use editor functionalities.

pad = new blogpad();

Initializing editor on created instance

pad = new blogpad();
  textarea: document.getElementById("id_content"),
  toolbar: true,
  heading: true,


Setting up a editor toolbar

By default if toolbar = true is passed to the init function it will create a toolbar out of the box. But if someone want to customize toolbar position or styling (buttons, icons etc.) then a toolbar can be setup manually by using setEditorToolbar function. We need to pass a custom toolbar to the function which contains toolbar buttons with defined actions in action attribute. A list of actions provided can be found above. An example of integrating custom toolbar is shown below.

<textarea id="id_content"></textarea>
<div id="editor_toolbar">
  <button action="bold">Bold</button>
  <button action="italic">Italic</button>
  <button action="underline">Bold</button>
  <button action="italic">foreColor</button>
pad = new blogpad();
  textarea: document.getElementById("id_content"),
  toolbar: false,
  heading: true,


Getting data from editor

Getting data from editor is very simple, we can use editorData function to get written contents of editor. This function can return content with style so that output looks same as it seems which is the idea behind WYSIWYG editor or bare output without style which can be styled with external stylesheet.

// get editor data with style
content = pad.editorData(true);
// get editor data without style
content = pad.editorData(false);


Getting supported action lists

We can also look defined actions for toolbar using toolSupported function. This will return all the tools actions that are currently supported by editor.





Improvements to project or new feature requests are welcomed, open an issue and describe improvements or new feature description.

GitHub license npm version PRs Welcome Live URL Documentation