lEditor

A clean web text editor

Usage

  1. It uses jQuery
  2. Include lEditor.js and lEditor.css
  3. Bind $(some-div).lEditor(); to onload event
  4. It's possible to add more options: 
    $(some-div).lEditor({
    height: '300px',
    color: '#ff0'
});

Options

editor appearance

height
a css size string, the total height of the editor, default is 200px.

textarea_bg_color
background color for the text area, default is #fff.

toolbar_color
button color, default is #444
.
toolbar_bg_color
background color for the toolbar, default is #ddd.

text initialization

text
initial text in the editor. HTML tags are also ok.

font
initial text font, default is Arial.

font_size
initial text font size, a number from 1 - 7, default is 4.

color
initial text color, default is #000
.
bg_color
initial text background color, default is #fff.

toolbar buttons

toolbar
layout of button groups in the toolbar, default layout is the same as the top one. It accecpts an array of strings. Possible strings are:
String Buttons
undo undo, redo
heading heading
font font name, font size
style bold, italic, underline
color text color, background color
align left, center, right
list ul, ol
link add, remove
media image
textblock hr, quote, code
remove clear format, clear all
button_size
a css size string for the button size, default is 14px.

full_screen
true/ false, enable full screen mode. A full screen button will show in the toolbar. Default is false.

tab
'off' / 'on', button groups will be put into different tab pages automatically. Useful when there are too much buttons. Default is 'on'

about
'off' / 'on', add an "about" tab showing about information. Default is 'off'.

getting the text

callback
a function called when text changes. the function accepts a parameter which is the html code of the text.

Demo

$('#demo1').lEditor({
    tab: 'off',
    height: '150px',
    toolbar: ['undo', 'style', 'link'],
    font: 'Georgia',
    textarea_bg_color: '#2e2e2e',
    toolbar_bg_color: '#525151',
    toolbar_color: '#4bd7ea',
    color: '#fff',
    callback: function(str){
        $('#demo1-code').val(str);
    }
});