Mobile-first Rich Text Editor With jQuery - Rich Text Format
File Size: | 10.6 KB |
---|---|
Views Total: | 5632 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Rich Text Format (RTF) is a minimal clean jQuery based rich text editor designed especially for mobile devices.
How to use it:
1. Import jQuery library together with the Rich Text Format's JavaScript and CSS files into the document.
<link href="RTF.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="RTF.js"></script>
2. Create the html for the rich text editor and editable area.
<div class="wrapper"> <div id="textStyle-container2"> <div class="editor-textStyle"> <div class="editor-textStyle-item"> <div class="editor-textStyle-bold" dataStyle="font-weight" dataStyleRS="800"> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-color" dataStyle="color" dataStyleRS=""> <span> </span> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-linedecoration" dataStyle="text-decoration" dataStyleRS=""> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-bgColor" dataStyle="background-color"> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-fontSize" dataStyle="font-size"> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-lineHeight" dataStyle="line-height"> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-align editor-textStyle-alignLeft" align="left" dataStyle="text-align" dataStyleRS="left"> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-align editor-textStyle-alignCenter" align="center" dataStyle="text-align" dataStyleRS="center"> </div> </div> <div class="editor-textStyle-item"> <div class="editor-textStyle-align editor-textStyle-alignRight" align="right" dataStyle="text-align" dataStyleRS="right"> </div> </div> </div> <div class="editor-textarea" id="editor-textarea" oninput="userInput()" contenteditable="true" spellcheck="true"></div> <div class="editor-options"></div> </div> <div id="textStyle-container1"></div> </div>
3. Create the sidebar controls to remove & save the editor.
<div class="editor-textEditor-formats"> <div class="editor-textEditor-format" onclick="clearEditor()"></div> <div class="editor-textEditor-clean" onclick="OKEditor()"></div> </div>
This awesome jQuery plugin is developed by zc95. For more Advanced Usages, please check the demo page or visit the official website.