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.

Getting Started

• Create a html template with a textarea that will be converted to blogpad editor by this library. Assign an id to textarea so that we can pass that element to library.

<div>
  <textarea id="id_content"></textarea>
</div>

• Link CDN of library to your html file

• Create a new JS file and link it to html and copy the contents below

// on window load
window.onload = function () {
  // create a new blogpad instance
  let pad = new blogpad();
  // initialize textarea as blogpad editor
  pad.init({
    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();
pad.init({
  textarea: document.getElementById("id_content"),
  toolbar: true,
  heading: true,
});

Arguments

• textarea (textarea element) : a textarea element that will be initialized as blog editor and manipulated by library. Default is undefined.
• toolbar (boolean) : whether to enable toolbar for editor or not. Default is true
• heading (boolean) : whether to create a blog Title editor or not. Default is 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>
</div>

pad = new blogpad();
pad.init({
  textarea: document.getElementById("id_content"),
  toolbar: false,
  heading: true,
});
pad.setEditorToolbar(document.getElementById("editor_toolbar"));

Arguments

• toolbar (toolbar parent) : A custom toolbar parent element with action buttons inside. Default is undefined.

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);

Arguments

• style (boolean) : get editor data with style applied or not. Default is true.

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.

console.log(pad.toolSupported());