Introduction:
LineControl is a Free and Open Source Jquery Plugin that 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.
This plugin was developed by the open source development team of Suyati Technologies. It’s available in Github for download.
This plugin has all basic text manipulation tools with a catchy image upload and html table features.
How it looks!
Main Advantages
- Lightweight and highly extensible.
- Developed in JQuery plugin method
- Responsive design with Bootstrap
- Easy integration with any applications
- No third party plugins required
- Customizable options, menus and themes
- X-browser support.
Dependencies
The following is required for your LineControl Editor:
- Jquery (1.9.1)
- Twitter Bootstrap
- Font-Awesome
Browser Support
LineControl uses HTML5 for some of its functions to deliver a faster user experience. LineControl works well for most Modern browsers:
- Google Chrome
- Mozilla Firefox
- Safari
- Internet Explorer (>=10)
How to integrate?
To add the plugin to your project, just include the JS and CSS files to your HTML template:
and then in your script section just call:
var editor = $("#placeHolder").Editor();
Note: You have to include bootstrap js, css and fontawesome files for the perfect functioning.
How to add a Custom option?
If you want to add custom Options to the editor just do:
editor('createMenuItem', {"text": "TouchGlasses", //Text replaces icon if its not available "icon":"icon icon-glass", //This is a Font-Awesome Icon "tooltip": "Touch Glasses", "custom": function(button, parameters){ //Your Custom Function. alert("Cheers!!!"); }, "params": {'option1':"value1"} //Any custom parameters you want to pass //to your custom function. });
Summary:
The TextEditor is too simple and feature rich compared to others in it’s class. The image upload process is too fast and no need of server side scripting. LineControl will be good option for those who are looking for simple and fast Texting.
Font Awesome Icons are available for Download.
18 comments
Good morning. I was implementing you jquery plugin, and I don’t know exactly where to put the code for custom buttons. I have tried in demo.html, before textarea initialization and after. and in editor.js, but nothing works.
Could you please tell me where to put it? Regards!
Hi,
Thanks for using Line-control. In the demo.html, please add below lines after “$(“#txtEditor”).Editor(); ” and check one glass icon is showing up. You can write your custom code in the place where we have the “alert”. Have a try and let’s know.
Works properly…Thanks for your help =)
Hi all.
While playing around with your editor just wondering what happend to given content after loading the editor:
wheres my content
… editor-content remains empty?
Thanks for help!
Regards.
Hi Stefan,
Thanks for your query. The editor won’t storing any kind of contetns, after loading the editor the given content may not be there, there is a function called getText using this function we can get the given contents source code from the editor.
Thanks
Hi All,
I have evaluated most of the responsive editor but I like Line-control with nice features and very interactive toolbar. But as per my requirement it is lacking for one feature i.e to upload video OR Integrate video from youtube, vimeo etc.
Is Line-controller support video upload option If yes then how I can add video upload button in my toolbar.
Hi Siddharth,
Linecontrol does not have video upload feature as of now. You can add this upload option in Linecontrol by extending the plugin, to see how to do this please visit https://github.com/suyati/line-control/wiki#adding-custom-options.
Thanks
Hi,
How do you remove remove the insert image button? or those who have two words in Title?
Hi Aldrin,
Thanks for your query, We can remove the insert image button from the editor menu items, for that In our editor.js files, just remove the ‘insert_img’ from the menuGroups variable, and refresh your browser.
Thanks
Okay thank you.. ^_^
How do we remove the align buttons from the editor menu items? In general, where can i find the codes for each menu item in order to remove it?
Hi Anita,
Thankyou for contacting us, you can remove the alignment buttons from the menu item. for removing the alignment buttons take editor.js, If you want to remove left align, make the ‘l_align’:true to ‘l_align’:False. then the left align button won’t appear, please clear your browser cache and check.
Thanks
I am using Line control Text Editor.But when i post its contents to server for saving its content to database,value comes on code behind page null.Although i write text in your text editor.Why value becomes null on code behind page.My project in MVC 4.0
Hi Naveen,
There is a function called getText in our editor, using this function we can get the given contents. Please try with the below url. https://github.com/suyati/line-control/issues/7
Thanks
I am using Line control Text Editor.But when i post its contents to server for saving its content to database,value comes on code behind page null.Although i write text in your text editor.Why value becomes null on code behind page
How to edit an already stored content
Cant get stored value in my textarea editor to show up.
I have no problem saving
HI,
I’m using your control in an MVC app. Passing the entered data to the control works fine using a javascript and using the getText method. The result is a string with html tags.
But when feeding the result back to setText. It does not render correct. I got a text with all html-tags visible. Any thoughts ?
Can we use this control for an ASP.NET Web page?(obviously without bootstrap or JQuery)