Bootstrap jQuery Based Light Weight HTML5 Text Editor Plugin

In this post I am going to introduce simple light weight plugin to add text editor feature in your website with little configuration. IF You have added any contact / support form in your website then you can add this text editor which help your visitor to send proper formated query to you. The plugin name is LineControl Editor. It allows you to add a beautiful, responsive and fast online Text Editor to your web application/site. LineControl is designed to work with Twitter Bootstrap and as a Jquery Plugin. To add the plugin to your project, just include the JS and CSS files to your HTML template.
bootstrap-jquery-html5-text-editor



Integrate Bootstrap jQuery Based Light Weight HTML5 Text Editor Plugin

First you need to include bootstrap fontawesome and LineControl Editor JS and
CSS libraries on page.

<!-- Include CSS Lib  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" > 
<link type="text/css" href="editor.css" rel="stylesheet"/>
 
<!-- Include JS Lib  -->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="editor.js"></script>

After that add simple div element on page where you want to display text editor.

<div id="txtEditor"></div>



Now all set just need to call Editor() function on page on assigned div id and it’ll display a cool responsive Bootstrap jQuery Based Light Weight HTML5 Text Editor

<script>
$(function() {  
 $("#txtEditor").Editor();  
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

You can also add more options in above function to control text editor look and feel behaviors etc by adding following properties as per your requirement.

<script>
$(function() {  
 $("#txtEditor").Editor({
  texteffects:true,
  aligneffects:true,
  textformats:true,
  fonteffects:true,
  actions : true,
  insertoptions : true,
  extraeffects : true,
  advancedoptions : true,
  screeneffects:true,
  bold: true,
  italics: true,
  underline:true,
  insert_img:true,
  fonts:'',
  styles:'',
  print:true,
  rm_format:true,
  status_bar:true,
  font_size:12,
  color:'#000000',
  splchars:'',
  insert_table:true,
  select_all:true,
  togglescreen:true
 });  
});
</script>

Visit official github repository for more information.



One Reply to “Bootstrap jQuery Based Light Weight HTML5 Text Editor Plugin”

  1. I need this comment coding with admin login permission.
    Any help will be appreciable.
    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.