kindEditor富文本框简介及常见问题处理

kindEditor的简介及一些问题处理

一、简介：

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera 等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布 2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

二、资产监督管理系统中的应用：

2.1 在资产监督管理系统中的具体界面：

在资产监督管理系统中，信息发布中具体信息的信息内容就使用了kindEditor来实现，具体界面如下图：

界面中主要应用了字体，文字颜色，字体背景，字体大小等通用的字体编辑方法和排版格式，还应用了发送表情的方法。

2.2具体的实现方法：

资产质量监督管理系统前台界面主要是通过jsp实现，信息发布也不例外。调用时需要将lang，themes，plugins三个文件夹都拷贝在jsp文件的目录下。具体的方法调用如下，

其中，items后的内容为具体的编辑功能引用，items之前的为kindEditor 的调用及一些属性的设置。

相关jsp界面中对js的调用有以下两条：

kindeditor-min.js主要是kindEditor调用的具体方法。其中：

_version可以看到当前kindEditor的版本信息；k.opitons中包含了该kindEditor所有的默认配置及属性。Items中为所提供的所有编辑功能。

langType 为各功能的语言显示类型，minWidth，minHeight为编辑器的大小配置，fullScreenMode为是否全屏显示，colorTable中可添加具体字体颜色，fontSizeTable中可添加所需要的字体大小，htmlTags下可进行tags 的各个属性的配置更改。这些是目前开发任务中能用到的具体参数配置。kindEditor中还有很多参数可以根据具体需求来进行配置。所有编辑功能的功能代码都在这js中，可根据不同的业务需求来更改这些功能

zh_CN.js 则为编辑界面中功能显示的字体类型。本项目中，lang包中有zh_CN.js zh_En.js zh_Tw.js 等三个js文件，分别代表简体字，英文，繁体字。此外，编辑界面中具体一些编辑功能如字体样式等包含的具体内容也是在这个js文件中配置。此外，这个js最重要的功能是对kindEditor提供的所有功能进行名称配置，包括各个主要编辑功能及具体功能包含的下属选项的名称配置。

2.3 项目中遇到的一些问题：

1、通过ctrl+c使用粘贴功能时一直会报错，提示console未定义

经过分析，找到两种解决该问题的方法：发达

(1)出现问题的代码如下所示：

dump :function(){

var console='';

console.log('--------------------');

console.log(this.startContainer.nodeType ==3?

this.startContainer.nodeValue :

this.startContainer,this.startOffset);

console.log(this.endContainer.nodeType ==3?

this.endContainer.nodeValue :this.endContainer,

this.endOffset);

}

定义console为空，后面的代码出现功能重复，删掉即可解决问题。

(2)尝试通过配置禁止用户使用ctrl+V的功能热键。

2、字体大小，字体颜色跟据测试组的需求不符

在K.options中的colorTable中配置所需字体颜色；在fontSizeTable中配置所需字体大小。

3、部分功能没有汉字提示，用户可能不清楚该按钮的具体功能

在zh_cn.js的https://www.360docs.net/doc/5415666786.html,ng中根据具体功能配置相应按钮的解释说明。

4、在本PC上上传的图片，信息发布后，在其他PC上图片无法显示。

经过分析，该功能只是单纯的将图片的路径保存起来，并没有将图片本身复制到相应服务器上。该问题经过在互联网上寻找方法，发现解决起来比较复杂。最终通过PI3000平台自带组件实现该功能。该问题会继续在空闲时间找寻解决方法。

5、信息添加成功后，在信息发布的过程中，信息内容不能修改

解决该问题的方法很简答，在前台的变量定义中 var editor，可以通过该定义使用kindEditor的各种属性控制。控制制度属性在本js中如下显示：editor.readonly()。

6、获取组件中的编辑内容

editor.html()

三、总结：

在信息发布中对kindEditor的应用过程中，由于组件自身的适应性及强大的编辑功能。在原代码的基础上并没有做过多的改动。针对该组件在信息发布中应用出现最多的问题时根据信息发布的需求重新配置了一些编辑功能。kindEditor总体来说确实是一款功能强大的在线编辑组件。在jsp界面中引用相当简便。对于开发人员来说，实现该组件的调用之后，只需根据自身项目的业务需求进行一些功能配置，代码改动几乎很少。所以，当项目需求一个在线编辑组件时，kindEditor确实是一个相当不错的选择。