jquery.qeditor--Lightweight Text Editor

I. Introduction of Jquery.qeditor1. Link Address

• : Project git Address
• : Introduction to the Chinese version
• : Test Demo

2. Advantages and disadvantages of other rich text editors

First of all, as you are looking for a lot of rich text editor, features are many, but also very complex, but a lot of features are not used, although many editors provide the function of selection function, but the interface is not good, or load slower, more code

Second, many editor calls trouble, editing content has too many style tags, affecting the layout.

3.jquery.qeditor Editor Feature description

1. The interface is clean and tidy, very suitable for small blog or feature less features of the page

2. All generated tags are standard HTML tags, no CSS style, keep the code neat

3. Automatically combines the editor seamlessly with the form according to a textarea binding

4. Use Font-awsome as the Toolbar button icon, simple to use, and support Retina Display

5. Immersive Full screen interface allows you to find the real preview in the Full screen interface (this is really recommended)

4. Personal opinion of Jquery.qeditor's small deficiency

1. Compatibility is slightly insufficient, its author did not test ie, but I tried, IE9 (including) below can not be used

2. No color settings and font settings (in fact, in order to keep the content and code clean, these can not)

Second, the use of Jquery.qeditor

The use of Jquery.qeditor is simple, here is a simple example with a description, you can download its git demo, the local line test

1. Introduction of documents

The editor is based on jquery, the icon is based on Font-awsome, and in addition, it is necessary to introduce a JS and CSS file, as follows:

<! DOCTYPE html>
 
The basic format is this, if you want to make the border look good, you can also write a little bit of CSS, as follows:
 2. Dot Style
<style type= "text/css" media= "screen" >  . TextArea {        background-color: #ffffff;        border:1px solid #cccccc;        -webkit-box-shadow:inset 0 1px 1px rgba (0, 0, 0, 0.075);        -moz-box-shadow:inset 0 1px 1px rgba (0, 0, 0, 0.075);        Box-shadow:inset 0 1px 1px rgba (0, 0, 0, 0.075);        -webkit-transition:border linear. 2s, box-shadow linear. 2s;        -moz-transition:border linear. 2s, box-shadow linear. 2s;        -o-transition:border linear. 2s, box-shadow linear. 2s;        Transition:border linear. 2s, box-shadow linear. 2s;        PADDING:4PX 6px;        font-size:14px;        line-height:20px;        Color: #555555;        -webkit-border-radius:4px;        -moz-border-radius:4px;        border-radius:4px;        Vertical-align:middle;        Outline:none;        height:400px;  }  </style>
jquery.qeditor--Lightweight Text Editor