推荐三款富文本编辑器：NicEdit和Kindeditor、UEditor_免费织梦模板,wordpress主题,web前端设计,建站教程,Photoshop教程,免费网站模板资源下载

web开发经常用到富文本编辑器，这里推荐三款轻量级、开源、可定制的富文本编辑器

NicEditor

NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。

NicEdit是我见过最轻量级的富文本编辑器，总共就一个JS文件和一张图片

使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本编辑器，代码如下

<head runat="server">
    <title></title>
</head>
<body>
 <form id="form1" runat="server">
  <script src="../JS/Eidtor/nicEdit.js" type="text/javascript"></script>
  <script type="text/javascript">            
        bkLib.onDomLoaded(function() {                
            new nicEditor({ fullPanel: true }).panelInstance('txtContent');
            });        
  </script>
   <asp:TextBox runat="server" ID="txtContent" TextMode="MultiLine" Height="200px" Width="600px" ></asp:TextBox>
 </form>
</body>
</html>

运行效果如下

官网中的版本为英文版，而且字体设置也只能设置英文字体，下面的是对英文版本做了简单的汉化，并且增加了几种中文字体，如下图

中文本下载

KindEditor

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、 Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。这个是官网上的介绍。

主页：http://www.kindsoft.net/index.php

下载：http://www.kindsoft.net/down.php

示例：http://www.kindsoft.net/demo.php

KindEditor相比较NicEditor涉及的文件要多很多，不过大小也才几百K而已，下图为文件结构

使用代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <script charset="utf-8" src="../JS/KindEditor/kindeditor-min.js"type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">        
    KE.show({
            id: 'txtContent',
            resizeMode: 1,
            allowPreviewEmoticons: false,
            allowUpload: false,
        });    </script>
    <textarea cols="60" id="txtContent" style="width: 600px; height: 300px;" runat="server"        readonly="readonly"></textarea>
    </form>
</body>
</html>

运行效果如下

UEditor

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码

主页:http://ueditor.baidu.com/website/index.html

下载:http://ueditor.baidu.com/website/download.html

示例:http://ueditor.baidu.com/website/onlinedemo.html

UEditor版本比较多，一般压缩包3M左右，解压后9M左右，体积也不是很大，且功能比较丰富。

QQ截图20150602143625.png

入门部署和体验

下载编辑器

到官网下载 UEditor 最新版：[官网地址]

创建demo文件

解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码

<!DOCTYPE HTML><html lang="en-US"><head>
    <meta charset="UTF-8">
    <title>ueditor demo</title></head><body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
    </body>
    </html>

在浏览器打开demo.html

如果看到了下面这样的编辑器，恭喜你，初次部署成功！

部署成功

传入自定义的参数

编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器：

var ue = UE.getEditor('container', {
    autoHeight: false});

配置项也可以通过 ueditor.config.js 文件修改，具体的配置方法请看前端配置项说明

设置和读取编辑器的内容

通 getContent 和 setContent 方法可以设置和读取编辑器的内容

var ue = UE.getContent();//对编辑器的操作最好在编辑器ready之后再做ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容，返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容，返回: hello
    var txt = ue.getContentTxt();});

UEditor 的更多API请看API 文档

详细文档

UEditor 官网：http://ueditor.baidu.com

UEditor API 文档：http://ueditor.baidu.com/doc

UEditor Github 地址：http://github.com/fex-team/ueditor

说明:NicEdit和kindEditor为冯威的学习专栏---记录工作学习点滴提供，百度UEditor为小编整理