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" 
      href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" 
      integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" 
      crossorigin="anonymous">

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" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
</script>
<script src="blackedit.js"></script>

5. Initialize & activate the BlackEdit editor.

var ed = new Editor('editor');
ed.init();

Changelog:

2019-04-29

• v4

2018-07-09

• important bug fixes, images with float abilities, new functions like "applyStyle" for styling the selection

---

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