suyati / line-control

A Light Weight HTML5 Text Editor designed as a JQuery Plugin

LineControl Editor

LineControl 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:

<script src="editor.js"></script>
<link type="text/css" href="editor.css" rel="stylesheet"/>

and then in your script section just call:

var editor = $("#placeHolder").Editor();

Get Text from editor

$("#placeHolder").Editor("getText");

Set Text to editor

$("#placeHolder").Editor("setText", "Hello")

Dependencies

LineControl is built as a JQuery Plugin and supports Jquery 2.1.0. LineControl is also built for responsiveness and uses Twitter Bootstrap and Font-Awesome icons to render its Interface. The following is required for your LineControl to function perfectly

• Jquery (2.1.0)
• Twitter Bootstrap (3.1.1)
• Font-Awesome (4.0.3)

###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)

Adding Custom Options

If you want to add custom Options to the editor just do:

editor('createMenuItem', {"text": "TouchGlasses", //Text replaces icon if its not available
                          "icon":"fa fa-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.
 });

Read more about extending LineControl here

Authors and Contributors

LineControl is developed by Suyati Technologies. It is written and maintained by their Open Source Development Team:

• Krishnanunni P N (@kpnunni)
• Arun V B (@abalakrishnan)
• Naveen Bos TM (@naveenbos)
• Sujith Panikkam (@spanikkam)

Support or Contact

Have Suggestions? Want to give us something to do? Contact us at : [email protected]

line-control's Issues

HTML is display as it is.

HTML is not appearing in encoded format in Editor.

How can I show encoded format in editor?

Get html content from editor in ASP.Net??

How can I get the html content of the editor from a C# code behind file in an ASP.Net application?

Not recieve value when submit form?

<textarea id="txtEditor" name="content"></textarea>

And i not recieve content value when submit form, please help me.

Embedding code

I cannot embed html/javascript code like youtube snippet.
I paste it in the view mode and when I switch back to the editor mode the code are gone.

Does line-control support embedding of code?

Bug Twitter embed

Hi,

First, Sorry for my english :)

I have a problem with twitter embed.
When i paste the embed (<blockquote class="twitter-tweet" ....... ), the code is immediately transformed like :

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-tweet twitter-tweet-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 220px; margin: 10px 0px; padding: 0px; display: block; position: static; visibility: visible; width: 500px;" title="Twitter Tweet" height="860"></iframe> <script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Thus the integration does not work.

Can you help me :D
Thank you in advance

Editor returns nothing

From the demo.html
var editor = $("#placeHolder").Editor();

editor is undefined

Enable right click paste

How do i do that ?

any api to enable this ?

Thanks.

Multiple editors on one page

How can I use this Editor twice on one page? If I create two textarea's with same class (here .form-control) only one editor is shown. The first textarea is hidden.
Field for textarea:

<textarea name="signature" class="form-control"></textarea> <textarea name="description" class="form-control"></textarea>

Editor declaration:
$('textarea.form-control').Editor();

How can I solve this problem?

Where in editor.js can I intercept user pasted text?

I would like to be able to examine text inserted by a user using the CTRL/V key combination. I have not been able to place a breakpoint in editor.js to at least determine where such code can be inserted.

I am particularly interested in being able to eliminate MS Word text formatting, etc., or if not give an alert message to the user.

Any help would be GREATLY APPRECIATED. THANKS.

To Enable Right Click for the Editor

Right click is not enabled for the Editor. How can we enable it ? Tried using the "oncontextmenu" not working ?

I don't want to use style in bbcode

When i click bold for sometext, code will be: style="text-decoration:bold"... How can i use for that?

Bootstrap 3

Can you make compatible with Bootstrap 3?

Paste images from clipboard not working on Chrome

Hi there

Paste images from clipboard doesn´t work on chrome? I successful tested on FF...

Thanks

Documentation - How to?

Could do with some documentation on what's possible and how to do it.

For example I'm trying to set the default value of the editor to what is returned from my database, but not sure how to do this.

Is there an online live demo?

Set the website of this GitHub repo

Presumably to http://suyati.com/linecontrol-jquery-text-editor-plugin/

Example:

Resize Images

After adding an image, is there anyway to resize the image by setting the height/width in percent or pixels?

Icon for code snippets

Hello, is there any method to convert, for example javascript snippet into code like in stackoverflow ?

Toolbar icons not showing

Using the same code as in the demo to include an lc editor on a page seems to work fine except the toolbar icons do not appear, just the tool tip text when you hold the mouse over an icon area.

I am using the versions of jquery, fonr-awesome, boostrap, and the two mainl lc editor files editro.css, and editor.js.

I am using a textarea with id = "job-description", and the line
var editor = $("#job-description").Editor();
in the .ready() function.

How to give restriction for Number of Characters?

Actually in case if i need restriction for number of characters to typed how can i do that. Please provide option for that. Because if i use in mobile app then i need that feature.

Cannot read property 'html' of undefined

I get the error:
editor.js:1547 Uncaught TypeError: Cannot read property 'html' of undefined

When trying to setText...
$("#content").Editor('setText', $("#content").text());

Bootstrap 3 and Line Control Insert (Image, Link, Table)

Bootstrap 3 hides the Line-Control Editor's Insert popups for InsertLink, InsertImage, and InsertTable.

If I put "display: block" on the div with id="InsertTable" or Link/Iamge, I am then able to view the popup and insert the files. The popup is unstyled with a transparent background.

i wanna hide some button , but it shows "editor is not a function"

followed wiki ----> https://github.com/suyati/line-control/wiki

var editor = $("#placeHolder").Editor();
editor({"blod":false});

browser show error : uncaught typeError editor is not a function

have i did something wrong?

How do you disable certain editor option?

We need a example of how to turn off certain editor option.

HyperLink not working FireFox?

When I try to add hyperlink in chrome it works fine. but on FireFox, Hyperlink is added but what ever i type in the same line still goes as hyperlink....

Readonly

Is there a way of setting the control as readonly?

Thank you!

Image Resizing

Hi,

Im adding an image to the editor but i couldnt resize it.

though the image is bigger, the responsive editor became ubnormal with horizontal scroll bar inside the editor.

Unable to upload content on MYSQL from editor

Hi

I am trying to insert the content of the editor into database but its not being done.
Please Help me out with this.

How can i re-size the icons ?!

I need to increase the size of the icons in the control bar to fit any screen size, can anyone give me a tip or somthing ?!

What's wrong with the editor using PHP

Hi there.
I have several hours trying to make it work just using the demo file that you made, and the post variable always is lost - no matter if I put the editor.css and editor.js in the common folders css and js.
Can you please put a simple full example running where I can see what can be wrong?
Cheers

textarea instead of div

Is it possibale using or generating instead of this piece of code
div style="overflow: auto;" class="Editor-editor" contenteditable="true">some values</div

this one textarea class="Editor-editor"> some values</textarea

in that way I guess it is more useable ,when we posting data to server.

Multi Editor Support

I have 3 editors on my page and I recently updated my editor.js to 1.1.0. As I was completing my final testing (in Chrome) before going live, I noticed a couple issues. I added an image to editor #1 without any problem. However, when I tried to add an image to editor #2, it would add it to #1. When I tried to add a text link, it wouldn't work at all. When I added a table to editor #2, it appeared in editor #1. Copying an image online and then doing Ctrl + V in editor #2 works fine.

Fonts, font size, bold/italics/underline, text colors, lists (ordered and unorderd), special characters, paragraph alignments, horizontal rules and pretty much everything else works fine. The issue seems to be confined to images, tables and links.

Has anyone else experienced this issue?

Saving edited content

NOTE: I had attempted to contact via your email address shown here at GitHub but email was returned... Please forgive me for asking question that is not real issue but in need of some assistance, please.

Hi. Firstly, nice job on LineControl! Thank you for sharing on GitHub.

I teach at a very low income school for troubled teens and this means our
budget is null, like in nothing:) So I do not have any type of support
channels except for myself and the internet.

Would like to implement your LineControl into some simple software. It
creates certificates.

Example:

Software displays a form and teachers input desired content. I would like
to use LineControl so teachers can customize the certificates with editor
but cannot figure out how to save the editor content to HTML/PHP file for printing?

Issue I cannot grasp is how to save the LineControl content into a file.
Could you point me to possible solution?

Far form techie so basic help would be much appreciated.

Thank you for your time,

Woody

Font-Awesome Icons

Font Awesome Icons require "fa fa-{icon name}" for the class. LineControl classes are "icon icon-{icon name}". They do not work.

Events & Image Upload

Hi!

I want to know if it supports events like on Change and how can i connect it with a server side image upload script.

Thanks!

Cacho

How to get value?

Hi. I have this textarea set up: var editor = $("#test").Editor();

How do I find the value of $("#test")? I have seen references to getText(), but I don't know how to use it. I want to copy the text from this textarea to another.

Thanks.

Table error

There is an error in rendering table.
I think you can solve it adding a space when you create the table:

getHTMLTable: function(tblRows,tblColumns,attributes){
...
for(var j=1; j<=tblColumns; j++){
var tblColumn = $('').html(' ');
tblColumn.appendTo(tblRow);
....
},

No Demo?

You would probably get more free testing users if you had a demo that didn't require a download.

Bold Italic Underline

Hi,

I am using LineControl Editor. There is option to make text style as bold, italic and underline. It works fine. But I want to add functionality of auto focusing. It means when bold text is selected, then "B" should get highlighted. If text which has style as underline and italic is selected or clicked , then both "U" and "I" should get selected. How do I do it ?
Please help me.

Disable past content with format

Hi, do you know how can i disable paste a content with font-color/font-size on rich text?
Can i enable only raw text with a default format.
Is it possible do it using this current version of component?

Tables are not inserting in IE11

Not able to insert table into editor in IE11 . it is working in IE9, 10 and chrome, firefox

thanks in advance

How get I newline mark( /n or \r)?

Hi

How get newline mark?

<textarea name="boardContent" id="texteditor" rows="20"  class="form-control input-block-level"></textarea>

$(".Edior-editor").text() or $(".Editor-editor").html() is not return newline mark

Thanks.

I I can not show the record of MySql.

My aplication php use de Line-control, I can save the data in Mysql but I can not show the data in Line-control. I try use this

        $(document).ready(function(){
             $("#txtEditor").Editor("setTxt","<?php echo $data;?>");
        });

But can not work.

Please help.

How to save the image?

Can you help me indicate me how can i save the image when i choose the option "image" ? Is there a method for make it? Thanks and sorry for my english

Inserting pictures/tables/links with multiple instances

When having multiple instances of the editor on one page, trying to insert a picture/table/link into one will sometimes insert the content into the wrong editor. Is there a fix for that?

Unencapsulated / Unusable CSS

Integrating the editor.css into an existing project is likely to cause a lot of problems because the CSS file overwrites lots of bootstrap and commonly-named classes

Remove instance or destroy function

Hi,
Is there a destroy function, or remove instance function?
regards
Antony

IE 11 user-agent

While I HATE coding anything for Internet Explorer, a vast amount of my users are still on it. With that said, I noticed some of the functionality was not working in IE 11. It turns out, the “MSIE” token, which has been part of the Internet Explorer user-agent from the beginning has been removed. Any sniffing code that looks for “MSIE” now will NOT work with the new user-agent string. You can still search for “Trident” but the true Internet Explorer version now comes via the “rv” token.

You will need to replace this:
if(navigator.userAgent.match(/MSIE/i))

With this:
if(navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/rv/i))

Hope this helps!

Editor don't works when I get text from database.

I saved my text of editor in a database normally, but when I read the saved text from the database and I put in the editor, does not work :
$ ('# txtTip' ).Editor ( "setText", ) ;

$dbText contains image and text.

Sorry my bad English.

How can i make default my textare in your plugin

Hello Suyati i'm surviving to make my own style WYIWYG, why it doesnt work?

<script type="text/javascript"> $(document).ready( function() { $("#txtEditor").Editor( 'createMenuItem', { 'texteffects':true, 'aligneffects':true, 'textformats':true, 'fonteffects':true, 'actions' : true, 'insertoptions' : true, 'extraeffects' : true, 'advancedoptions' : true, 'screeneffects':true, 'bold': true, 'italics': true, 'underline':true, 'ol':true, 'ul':true, 'undo':true, 'redo':true, 'l_align':true, 'r_align':true, 'c_align':true, 'justify':true, 'insert_link':true, 'unlink':true, 'insert_img':true, 'hr_line':true, 'block_quote':true, 'source':true, 'strikeout':true, 'indent':true, 'outdent':true, 'fonts':fonts, 'styles':styles, 'print':true, 'rm_format':true, 'status_bar':true, 'font_size':fontsizes, 'color':colors, 'splchars':specialchars, 'insert_table':true, 'select_all':true, 'togglescreen':true } ); }); </script>

Thanks for respon

Freddy