首页 > 代码库 > jquery.qeditor——轻量级文本编辑器

jquery.qeditor——轻量级文本编辑器

一、jquery.qeditor简介

1、链接地址

  • :项目git地址
  • :中文版介绍
  • :测试Demo

2、其他富文本编辑器的优缺点

首先,正如你在找的很多富文本编辑器,功能有很多,也很复杂,但是很多功能根本用不到,尽管很多编辑器提供选择功能的功能,但又界面不好看,或者加载较慢,代码较多

其次,很多编辑器调用麻烦,编辑的内容有太多的style标签,影响布局。

3.jquery.qeditor编辑器功能介绍

在此输入图片描述

1.界面干净整洁,非常适合于小博客或功能排版功能较少的页面

2.所有生成的标签都是html的标准标签,没有css的样式,保持了代码的整洁

3.自动根据一个 textarea 绑定,让编辑器无缝的和 form 结合

4.使用 Font-awsome 作为 Toolbar 的按钮图标,使用简单,并且支持 Retina Display

5.沉浸式的全屏界面,让你在全屏界面找到真实预览的感觉(这个真心推荐)

4.个人认为jquery.qeditor的小小不足

1.兼容性略有不足,其作者并没有测试IE,但是我试了试,在IE9(包括)以下都不可以使用

2.没有颜色的设置及字体的设置(其实为了保持内容及代码的干净,这些可以没有)

二、使用jquery.qeditor

jquery.qeditor的使用很简单,这里做一个简单的示例与说明,可以下载其git上的demo,在本地就行测试

1、引入文件

该编辑器是基于jquery的,图标是基于Font-awsome,此外,还要引入必须的一个js和css文件,如下:

<!DOCTYPE html>
<html>
<head>
      <meta charset=utf-8">
      <title>jquery.qeditor</title>
      <link href="http://libs.baidu.com/fontawesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
      <link rel="stylesheet" href="http://www.mamicode.com/css/jquery.qeditor.css" type="text/css">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://www.mamicode.com/js/jquery.qeditor.js" type="text/javascript"></script>
</head>
<body>
    <textarea id="post_body" name="body" class="textarea" placeholder="Type your post"></textarea>
    <script type="text/javascript">
            $("#post_body").qeditor({});
    </script>
</body>
</html>

基本的格式便是如此,如果想让边界好看点,还可以自己写一点点的css,如下:

2、加点样式

<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——轻量级文本编辑器