KindEditor在线文本编辑器

我们平时上一些论坛或者上博客时，会看到有些网站的文本输入效果很好，非常类似于word一类的文本编辑工具，所见即所得，其实类似这种编辑器有很多种，比较出名的有KindEditor、FCKEditor等，现在我们具体介绍下kindeditor这个文本编辑库的使用（本例中使用的kindeditor是经过修改的，方便在项目中使用）。

准备工作

1：下载kindeditor，到它的官方网站下载即可，地址是：http://www.kindsoft.net/，还很方便，有中文版的

2：解压下载后的压缩包得到一个目录，其中有asp、asp.net、jsp、php等目录，这些是在具体的项目中要使用的，我们以jsp为例介绍，在解压缩的文件夹中，我们还能看到kindeditor.js和kindeditor-min.js两个JS文件，接下来我们就要对这个目录的文件进行加工

3：修改kindeditor的相关文件

1、  将kindeditor.js、skins目录、plugins目录、jsp目录、attached目录一起拷贝到我们工程中的一个目录中（指的是webroot目录下的一个文件夹），我的那个目录是名称为editor，以后我都是以这个目录为例

2、  打开skins目录下的default.css，查找里面有background-image关键字的相关行，将里面的图片路径修改为正确的路径，其中oxygen/oxygen.gif这个路径我们下载来的包是没有的，其实这个文件我们可以用skins/default目录下的default.gif文件替代

3、  打开jsp目录下的upload_json.jsp文件，修改里面相关的路径字符串，还可以修改能接受的文件扩展名，具体代码在附件中，请参考

4、  打开jsp目录下的file_manager_json.jsp文件，同样修改相关的路径字符串

4：使用kindeditor，利用工具创建任意一个静态页面或者是jsp页面，本文中使用的是静态html页面，在header标签里加入如下js代码

<mce:script type="text/javascript" charset="utf-8" src="./kindeditor.js" mce_src="kindeditor.js"></mce:script> <mce:script type="text/javascript"><!-- KE.show({ /* * 此处的items的值是表示编辑器的菜单有哪些功能 */ id : 'content1', items : ['preview','specialchar','date','time','link'] }); // --></mce:script>

在body中添加类似于如下代码

<div class="editor"> <textarea id="content1" name="content" style="width:700px;height:200px;visibility:hidden;">

 

然后部署运行工程即可看到效果，至于为什么要部署，因为图片需要实时上传，所以在村崔的静态页面中是做不到的，必须部署后才能调用upload_json.jsp和file_manager_json.jsp页面，好了现在来解释下我们编写的两个JS代码

<script type="text/javascript" charset="utf-8" src="./kindeditor.js"></script>是引入js库，这个是必须的

KE.show({ /* * 此处的items的值是表示编辑器的菜单有哪些功能 */ id : 'content1', items : ['preview','specialchar','date','time','link'] });

这段代码的意思就是显示一个文本编辑器，id是指文本编辑器所绑定的输入域对象的id为content1，items是指文本编辑器所拥有的菜单的功能，我们这里显示了5项，具体的代码参考如下：

<!--

  source                       #查看源代码，指查看编辑窗口的html代码

  |                               #分隔符

  fullscreen                         #全屏显示

  undo                                #撤销

  redo                                #重做

  cut                                  #剪切

  copy                                #拷贝

  paste                                #粘贴

  plainpaste                         #粘贴为无格式文本

  wordpaste                        #从word粘贴

  justifyleft                         #左对齐

  justifycenter                            #居中对齐

  justifyright                       #右对齐

  justifyfull                         #两端对齐

  insertorderedlist                #插入编号

  insertunorderedlist                   #项目符号

  indent                       #增加缩进

  outdent                            #减少缩进

  subscript                          #下标

  superscript                       #上标

  selectall                           #全选

  print                                #打印

  -                              #功能菜单换行显示

  title                                 #字体标题如H1,H2等

  fontname                         #字体类型

  fontsize                            #字体大小

  textcolor                          #字体颜色

  bgcolor                            #背景颜色

  bold                                #粗体

  italic                         #斜体

  underline                         #下划线

  strikethrough                           #中间划线

  removeformat                          #清楚格式

  image                              #插入图片

  flash                                #插入flash

  media                              #插入媒体对象

  advtable                           #插入表格

  hr                             #插入横线

  emoticons                        #插入表情

  link                                 #超链接

  unlink                       #取消超链接

  about                               #关于。。

  specialchar                       #插入特殊字符

  preview                           #预览

  date                                 #插入年月日

  time                                #插入时分秒 

-->

注：附件中下载的包已经包含了日期输入、特殊字符输入和预览效果的插件

附件下载：xxx