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
   
Responsive WYSIWYG Text Editor with jQuery and Bootstrap - LineControl Editor

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.