Responsive WYSIWYG Text Editor with jQuery and Bootstrap - LineControl Editor
File Size: | 25.7 KB |
---|---|
Views Total: | 329915 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
LineControl Editor is a jQuery plugin to append an WYSIWYG rich text editor to a textarea
or any other container elements like DIV. The license is under the GNU General Public License, version 2.
Features:
- Responsive and easy to implement.
- Styled with Bootstrap 3 and Font Awesome 4.
- A word counter to count the number of words.
Basic Usage:
1. Include the jQuery library and other necessary resources in the Html document.
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
2. Include the jQuery LineControl Editor plugin's javascript and CSS after jQuery library.
<link href="editor.css" type="text/css" rel="stylesheet"/> <script src="editor.js"></script>
3. Create an empty container element for the text editor.
<div id="txtEditor"></div>
4. Call the plugin on the container element.
<script type="text/javascript"> $(document).ready( function() { $("#txtEditor").Editor(); }); </script>
5. Default settings.
'texteffects':true, 'aligneffects':true, 'textformats':true, 'fonteffects':true, 'actions' : true, 'insertoptions' : true, 'extraeffects' : true, 'advancedoptions' : true, 'screeneffects':true, 'bold': true, 'italics': true, 'underline':true, 'ol':true, 'ul':true, 'undo':true, 'redo':true, 'l_align':true, 'r_align':true, 'c_align':true, 'justify':true, 'insert_link':true, 'unlink':true, 'insert_img':true, 'hr_line':true, 'block_quote':true, 'source':true, 'strikeout':true, 'indent':true, 'outdent':true, 'fonts':fonts, 'styles':styles, 'print':true, 'rm_format':true, 'status_bar':true, 'font_size':fontsizes, 'color':colors, 'splchars':specialchars, 'insert_table':true, 'select_all':true, 'togglescreen':true
Change logs:
2018-03-27
- seperated statusbar css
2015-11-06
- supports for table editing.
2015-05-21
- fix for this object in onsave of insert link
2015-02-19
- fixed color text color, bg color related issues
2015-02-09
- fixed Status bar issue
This awesome jQuery plugin is developed by suyati. For more Advanced Usages, please check the demo page or visit the official website.