2 demos of Bootstrap / jQuery based WYSIWYG text editor

The WYSIWYG text editor for your website

If your project is based on Bootstrap framework and you require using a text editor with rich features then line-control is a light-weight choice.

The line-control is a jQuery based plug-in which is implemented on Bootstrap framework. It is a responsive and fast text editor that is supported by modern browsers like Google Chrome, Firefox, IE > 10, Edge, and Safari.

You only need adding the JS and CSS file of the editor and as it used font-awesome icons in its toolbar for different features like aligning text to center, left, and right, making text bold, italic and underlined, attaching files etc. So, you need to include the font-awesome CSS file as well.

A demo of using jQuery / Bootstrap text editor

The markup is simply a textarea which is assigned an ID. The ID is referred in the jQuery code that calls the line-control text editor. See the markup and jQuery code for this demo along with online experience:

bootstrap text editor

See online demo and code

The simple markup for this demo:

 

The jQuery code:

 

How to set up line-control text editor?

First of all, download the package from the plug-in home page.

Get the JS and CSS files after extracting the zipped file. You may also get the editor.js and editor.css files from the demo page view source.

Just use the markup and jQuery code for initiating the editor as shown in the demo.

A few features of this awesome text editor

The features of text editor include:

  • Set the font family like Sans Serif, Serif, Narrow, Verdana etc. from the dropdown.
  • Apply the heading style from h1 to h6 by using the formatting dropdown.
  • The font size has different options like setting the text small, normal, medium, large and huge.
  • Options of making the text Bold, Italic, Underlined.
  • You may also apply color to the selected text by using the color pallet.
  • Attach and de-link the images or files.
  • Inserting tables into the text editor.
  • Insert special characters.
  • Many other features.

A demo of customizing the editor by using different options in jQuery

You may also customize the default editor by using jQuery code. For example, you may hide different buttons by using the false value like:

 

Set this demo where I made bold, italic and font toolbar buttons disappeared by using the false value:

bootstrap text editor custom

See online demo and code

The jQuery code:

 

The same markup is used as in above example.