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