Bootstrap jQuery Based Light Weight HTML5 Text Editor Plugin

bootstrap-jquery-html5-text-editor

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.


<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"/>
 

<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.

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.

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.

Leave a Reply

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

Top