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:
See online demo and code
The simple markup for this demo:
<div class="container-fluid"> <div class="row"> <h2 class="demo-text">A demo of jQuery / Bootstrap based editor</h2> <div class="container"> <div class="row"> <div class="col-lg-12 nopadding"> <textarea id="demo-editor-bootstrap"></textarea> </div> </div> </div> </div> </div>
The jQuery code:
<script>
$(document).ready(function() {
$("#demo-editor-bootstrap").Editor();
});
</script>
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:
"bold":false "italics": false "fonts": false
Set the code below where I made bold, italic, and font toolbar buttons disappear by using the false value:
The jQuery code:
<script>
$(document).ready(function() {
$("#demo-editor-bootstrap").Editor(
{"bold":false,
"italics": false,
"fonts": false
}
);
});
</script>
The same markup is used as in above example.