WYSIWYG Text & HTML Editor With jQuery - BlackEdit

WYSIWYG Text & HTML Editor With jQuery - BlackEdit

BlackEdit is a simple, lightweight yet full-featured WYSIWYG rich text editor for jQuery that enables your users to write posts/articles/comments/ in both Text and HTML modes.

The WYSIWYG rich text editor is based onĀ contenteditable element and requires the latest Font Awesome for the toolbar icons.

Available editor buttons:

  • Headling & paragraph.
  • Bold
  • Italic
  • Underline
  • Horizontal rule
  • Add Link
  • Unordered list
  • Orderes list
  • Add Image
  • Block Quoto
  • Undo
  • Redo
  • Add Youtube Video

How to use it:

1. Include the necessary Font Awesome 5 and the BlackEdit's stylesheet in the header of the page.

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" 

2. Create a container for the WYSIWYG rich text editor.

<div id="editor"></div>

3. Create a container for the HTML editor in which the plugin outputs the HTML codes while writing in the text editor.

<div id="ed-output"></div>

4. Include jQuery JavaScript library and the jQuery BlackEdit plugin's script at the bottom of the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="blackedit.js"></script>

5. Initialize & activate the BlackEdit editor.

var ed = new Editor('editor');

This awesome jQuery plugin is developed by raj457036. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 04.07.2018
  • Source