Basic Rich Text Editor Using jQuery And Document.designMode
File Size: | 4.33 KB |
---|---|
Views Total: | 8287 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a small JavaScript library that adds a basic WYSIWYG editor to an contenteditable element using jQuery, Font Awesome, and Document.designMode API.
How to use it:
1. Include the necessary jQuery library and Font Awesome on the webpage.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2. Add an editor toolbar to your ontenteditable element.
<div id="editor" contenteditable="false"> <section id="toolbar"> <div id="bold" class="icon fas fa-bold"></div> <div id="italic" class="icon fas fa-italic"></div> <div id="underline" class="icon fas fa-underline"></div> <div id="strikeThrough" class="icon fas fa-strikethrough"></div> <div id="createLink" class="icon fas fa-link"></div> <div id="insertUnorderedList" class="icon fas fa-list-ul"></div> <div id="insertOrderedList" class="icon fas fa-list-ol"></div> <div id="justifyLeft" class="icon fas fa-align-left"></div> <div id="justifyRight" class="icon fas fa-align-right"></div> <div id="justifyCenter" class="icon fas fa-align-center"></div> <div id="justifyFull" class="icon fas fa-align-justify"></div> </section> <section id="page" contenteditable="true"> <p id="page-content"></p> </section> </div>
3. Include the main JavaScript file at the bottom of the webpage. Done.
<script src="script.js"></script>
This awesome jQuery plugin is developed by farmerchuk. For more Advanced Usages, please check the demo page or visit the official website.