Simple HTML5 WYSIWYG Editor With jQuery - gbRichEdit5

Simple HTML5 WYSIWYG Editor With jQuery - gbRichEdit5

gbRichEdit5 is a small and fast jQuery plugin that attaches a simple HTML5 WYSIWYG text editor (with instant preview) to a textarea element.

The WYSIWYG editor provides basic editing functionalities like: text styling, headings, lists, alignment, links, images, HTML codes and more.

Ideal for news, blog, CMS or other content websites.

1. Include the necessary jQuery library and Font Awesome (for editor icons) iconic font on the webpage.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

2. Include the jQuery gbRichEdit5 plugin's JavaScript and Stylesheet on the page.

<link href="gre/gre.css" rel="stylesheet">
<script src="gre/jquery.gre.js"></script>

3. Attach the editor to a textarea element you specify.

<textarea id="example" name="editor" class="gre">
  Content here
</textarea>
$(function(){
  $('.gre').gre();
});

4. Set the height of the HTML5 WYSIWYG text editor.

$(function(){
  $('.gre').gre({
    height: 300
  });
});

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

  • Publication date: 17.06.2018
  • Source