KindEditor使用
最近在项目里使用到了富文本编辑框.以前就接触过KindEditor,这次系统的使用,故做些整理.
项目使用的是异步加载替换div的方式实现页面的变换,kindEditor的初始化中的KindEditor.ready()中使用的方式并不起作用,原因可能是这种情况下DOM加载完成事件(DOMContentLoaded)没被触发,导致新加载的div中的js函数并没有被执行。
具体步骤如下:
-
在加载替换div后触发contentChged事件.
$(contentdiv).trigger('contentChged'); -
捕获contentChged初始化编辑器
{% highlight javascript %}
$("#push-config-content").bind("contentChged", function () {
initKindEditor();
}); -
具体初始化代码
var editor4Content;
function initKindEditor(){
editor4Content = KindEditor.create('textarea[name="pushMedia.pmContent"]', {
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
afterBlur: function () { this.sync(); },
basePath: '../js/jquery/plugins/kindeditor-4.1.10/',
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'source'],
afterChange : function() {
//字数统计包含HTML代码,该功能是通过修改源码实现的,更新版本时请注意
$('.word_count1').html(this.countCode());
var limitNum = 512; //设定限制字数
var pattern = '还可以输入' + limitNum + '字';
$('.word_surplus').html(pattern); //输入显示
if(this.countCode() > limitNum) {
pattern = ('字数超过限制，请适当删除部分内容');
} else {
//计算剩余字数
var result = limitNum - this.countCode();
pattern = '还可以输入' + result + '字';
}
$('.word_surplus').html(pattern); //输入显示
}
});
} -
项目需要字数限制和统计,并且字数限制和统计涉及到中文字符串的处理.
{% highlight javascript %}
/**
* 计算字符串所占的内存字节数，默认使用UTF-8的编码方式计算，也可制定为UTF-16
* UTF-8 是一种可变长度的 Unicode 编码格式，使用一至四个字节为每个字符编码
*
* 000000 - 00007F(128个代码) 0zzzzzzz(00-7F) 一个字节
* 000080 - 0007FF(1920个代码) 110yyyyy(C0-DF) 10zzzzzz(80-BF) 两个字节
* 000800 - 00D7FF
00E000 - 00FFFF(61440个代码) 1110xxxx(E0-EF) 10yyyyyy 10zzzzzz 三个字节
* 010000 - 10FFFF(1048576个代码) 11110www(F0-F7) 10xxxxxx 10yyyyyy 10zzzzzz 四个字节
*
* 注: Unicode在范围 D800-DFFF 中不存在任何字符
* {@link http://zh.wikipedia.org/wiki/UTF-8}
*
* UTF-16 大部分使用两个字节编码，编码超出 65535 的使用四个字节
* 000000 - 00FFFF 两个字节
* 010000 - 10FFFF 四个字节
*
* {@link http://zh.wikipedia.org/wiki/UTF-16}
* @param {String} str
* @param {String} charset utf-8, utf-16
* @return {Number}
*/
{% endhighlight %}
故我们需要对中文进行特殊判断.
我的处理方法是,更改KindEditor的源码,在其原生count方法后中增加了:
countCode : function() {
var self = this,
total = 0,
i,
str = _removeBookmarkTag(_removeTempTag(self.html())),
len;
for(i = 0, len = str.length; i < len; i++){
charCode = str.charCodeAt(i);
if(charCode <= 0x007f) {
total += 1;
}else if(charCode <= 0x07ff){
total += 2;
}else if(charCode <= 0xffff){
total += 3;
}else{
total += 4;
}
}
return total;
},
{% endhighlight %}
- 最后贴上html代码
<div id="content-ke">
<textarea rows="3" id="push-config-content"class="textarea validate[required,maxSize[512]]"
name="pushMedia.pmContent"
style="width: 300px;" >${(pushMedia.pmContent)!}</textarea>
<p>
您当前输入了 <span class="word_count1">0</span> 个文字。（字数统计包含HTML代码。）
<br>
<span class="word_surplus"></span>
</p>
</div>
使用中碰到的问题
1.在系统中,kindeditor是在tab页下加载的,测试提出的bug是,当tab页面第一次关闭,再次打开的时候,会出现如下报错VM65105:32 Uncaught TypeError: Cannot read property 'getSelection' of undefined
经排查,发现是因为关闭后,页面对象被销毁了,而kindeditor对象并没有被销毁的缘故.故在此打开时我的判断kindeditor对象是否存在的函数失效,并未进行重新加载编辑器.
解决方案: 将editor更改为局部变量,值在函数内部生效.当跳出函数时就为null,这样的话就能够再次生成了.
