kinEditor动态渲染的问题

摘自：jingyan.baidu.com/article/a65957f4a4c89a24e67f9b3d.html

在使用kindEditor时，因为textarea是动态加载的，因而对textarea的渲染总是不成功，在网上看到了这篇文章，我的问题也解决了，感谢作者，我也收藏下来，以便以后借鉴。

费了“九牛二虎”之力,终于搞定了。

问题经过:

使用dwz前台js框架需要用到kindeditor编辑器,按照kindeditor说明初始化编辑器,

在 IE中没问题。在谷歌浏览器中不加载kindeditor ; 没办法 alert 找错误吧,找到Kindeditor.ready(function(){})的时候 不走了,那就到Kindeditor.js中看看这个 ready 吧, 眼晕了, ready中alert看看吧,发现在谷歌浏览器中死活不走ready中的几个function函数( readyFunc()、 ieReadyFunc()、ieReadyStateFunc()......);

(截图图片,上传不上?why?)

没办法,没时间研究这个了,想个别的招吧;

既然kindeditor的ready不能用了,那就跳过换jquery的吧。

*********************************************

原始的kindeditor初始化时这样的:

KindEditor.ready(function(K){

var editor =  K.create(

'#kindeditor',

{

width : "80%", //编辑器的宽度为70%

height : "430px", //编辑器的高度为100px

filterMode : false, //不会过滤HTML代码

resizeMode : 1 ,//编辑器只能调整高度

imageUploadJson : '/kindeditor-4.1.7/jsp/upload_json.jsp',

fileManagerJson : '/kindeditor-4.1.7/jsp/file_manager_json.jsp',

allowUpload : true,

allowFileManager : true,

afterCreate : function() {

var self = this;

K.ctrl(document, 13, function() {

self.sync();

document.forms['example'].submit();

});

K.ctrl(self.edit.doc, 13, function() {

self.sync();

document.forms['example'].submit();

});

},

items : [

'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'code', 'cut', 'copy', 'paste',

'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',

'table', 'hr', 'pagebreak',

'anchor', 'link', 'unlink', '|', 'image','multiimage','flash','media','insertfile','editImage'

],

afterBlur: function(){this.sync();},//和DWZ 的 Ajax onsubmit 冲突,提交表单时 编辑器失去焦点执行填充内容

newlineTag : "br"

});

});

**************************************************************

我改,注意加粗、倾斜的地方。

////////////////////////////////////////////////

问题解决:(原来一步到位直接在kindeditor.ready中完成,现在分两步)

封装下kindeditor初始化函数:

function kedit(keid){ 

alert(1);

var keditor =  KindEditor.create(

'#' + keid,

{

width : "80%", //编辑器的宽度为70%

height : "430px", //编辑器的高度为100px

filterMode : false, //不会过滤HTML代码

resizeMode : 1 ,//编辑器只能调整高度

imageUploadJson : '/kindeditor-4.1.7/jsp/upload_json.jsp',

fileManagerJson : '/kindeditor-4.1.7/jsp/file_manager_json.jsp',

allowUpload : true,

allowFileManager : true,

afterCreate : function() {

var self = this;

KindEditor.ctrl(document, 13, function() {

self.sync();

document.forms['example'].submit();

});

KindEditor.ctrl(self.edit.doc, 13, function() {

self.sync();

document.forms['example'].submit();

});

},

items : [

'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'code', 'cut', 'copy', 'paste',

'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',

'table', 'hr', 'pagebreak',

'anchor', 'link', 'unlink', '|', 'image','multiimage','flash','media','insertfile','editImage'

],

afterBlur: function(){this.sync();},//和DWZ 的 Ajax onsubmit 冲突,提交表单时 编辑器失去焦点执行填充内容

newlineTag : "br"

});

alert(1);

}

在使用的地方用jquery的ready调用

<SCRIPT type="text/javascript">

$(function (){

   alert(1);

 kedit("kindeditor");

});

</SCRIPT>

//////////////////////////////////////////////////////////

测试 IE下正常、谷歌也正常了 OK。

个人的一点小经验 希望能帮到有用的朋友。