WYSIWYG Text & HTML Editor With jQuery - BlackEdit

File Size: 36.6 KB
Views Total: 13220
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.