摘要：最近在自己学习搭建网站的时候，突然要搭建网站的时候发现了一个好东西，那就是kindeditor这个文本编辑器，这个编辑器简单好用，而且很小，并且是开源的。

文本编辑器介绍

　　KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

kindeditor的主要特点

快速：体积小，加载速度快
开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera

发展历程

2006年07月：KindEditor 2.0 发布
2009年01月：KindEditor 3.0 发布
2010年06月：KindEditor 3.5 发布
2011年08月：KindEditor 4.0 发布

文本编辑器的下载

点击下载就可以使用了，下载位置看你喽，我是直接下载到了桌面，后面使用方便。

文本编辑器的使用

　　将下载成功的编辑器直接放在项目的static文件夹中，然后在你需要的模板中使用就好，我这里是backend.html，然后再我们需要的textarea中设置就可以实现编辑，找到textarea的id(每一个标签的id都是唯一的)，然后给这个东西添加脚本。

textarea文本框

<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

编辑器脚本

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

Note

第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数。

在初始化参数里面有许多可以支持自定义，你可以根据你的需求进行更改

编辑器文本上传

我因为要上传图片，文件所有就用到了自定义的extraFileUploadParams这个东西，上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

添加

KindEditor.ready(function(K) {
        K.create('#id', {
                extraFileUploadParams : {
                        item_id : 1000,
                        category_id : 1
                }
        });
});

后面我们不想让这个框可以被拖动，就得设置这个resize Type这个参数

resize Type

2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

数据类型: Int
默认值: 2

剩下的大家有兴趣可以去研究，比如说这是主题风格等。

文本编辑器之kindeditor