Blogpad

A simplistic medium style blog WYSIWYG editor for website.

Features

  • Written in Vanilla JS so no other dependency required.
  • Easy to integrate into website.
  • Inbuilt code block for code writing.
  • Paste contents into editor, formats content automatically as we paste.
  • Image and code pasting into editor.
  • Basic editing toolbar, which is also customizable.
  • Retrieve data from editor using JS easily with or without style applied.

Toolbar Actions Provided

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
  • wysiwyg
  • medium-editor
  • wysiwyg-editor
  • wysiwyg-editors
  • wysiwyg-html-editor
  • wysiwyg-js-editor
Live Demo Github Source Documentation