论坛 Forum

环境：Firefox-3.6.8, KindEditor-3.5.1, JQuery-1.4.2

 

HTML模式下无法编辑，鼠标点击编辑区没有反应，也无法输入。

在源代码模式下输入的内容再回到HTML编辑模式发现没有内容，但是与JQuery-1.2.3一起使用没有这个问题。

 

在IE下KindEditor3.5.1与JQuery1.4.2一起使用没有这个问题。

我刚试过，只加载jquery.js没发现问题，可能和具体的程序调用有关。

我创建KindEditor的代码如下：

$(document).ready(function() {
    // 初始化邮件编辑器
    var editorHeight = 380;
    if (KE.g["_contentEditor"]) {
        KE.remove("_contentEditor");
    }
    KE.init({
        id:'_contentEditor',
        shadowMode:false,
        autoSetDataMode:false,
        allowPreviewEmoticons:false,
        loadStyleMode:false,
        width:'100%',
        height:editorHeight,
        resizeMode:0
    });
    KE.create("_contentEditor");
    $(KE.g["_contentEditor"].bottom).hide();
}

 

注：CSS我是在页面中显示导入。

现在发现了新的问题，对解决这个问题应该有帮助：

1、在编辑区无法输入并且点击无反应的情况下，点击最大化按钮，编辑区就可以输入了。但是看不到光标，这时再点击最大化按钮恢复到原来的大小，编辑区也可以输入但是也看不到光标。

2、接着将鼠标点击KindEditor以外的区域，再点击KindEditor的编辑区，光标就出现了。

 

这个问题和jquery没什么关系，KE.init部分放在ready外面就可以。KE.init里有CSS动态加载，放在ready里可能有问题。

我用的是显示加载，并且在初始化参数中设置：loadStyleMode:false

 

我看到KE.init()函数的源码，中间载入CSS是这样实现的：

if (g.loadStyleMode) KE.util.loadStyle(g.skinsPath + g.skinType + '.css');

 

所以KindEditor在KE.init()函数中是不会再加载 default.css 这个文件。

 

我把KE.init()放在$(document).ready() 外面执行也不行，一样还有问题。

我详细描述一下我使用的场景:
注：页面中导入了jquery1.4.2.js和KindEditor的default.css。
1、一个页面分左右两个区域（用两个DIV），左边的DIV中有一个按钮，点击这个按钮触发一个ajax请求，将ajax返回的html填充到右边的DIV。如：
$.post("hello.action", param, funciton(data) {
    $("#right_div_id").html(data);
});

返回的data内容如下：
<script type="text/javascript" src="simple/contentWrite.js"></script>
<div>
    <textarea id="_contentEditor" name="_contentEditor"></textarea>
</div>


2、contentWrite.js中有如下代码：
$(document).ready(function() {
    // 初始化邮件编辑器
    var editorHeight = 380;
    if (KE.g["_contentEditor"]) {
        KE.remove("_contentEditor");
    }
    KE.init({
        id:'_contentEditor',
        shadowMode:false,
        autoSetDataMode:false,
        allowPreviewEmoticons:false,
        loadStyleMode:false,
        width:'100%',
        height:editorHeight,
        resizeMode:0
    });
    KE.create("_contentEditor");
    $(KE.g["_contentEditor"].bottom).hide();
}

3、我现在把
var editorHeight = 380;
KE.init({
        id:'_contentEditor',
        shadowMode:false,
        autoSetDataMode:false,
        allowPreviewEmoticons:false,
        loadStyleMode:false,
        width:'100%',
        height:editorHeight,
        resizeMode:0
    });

放在$(document).ready(function() {之前或直接放在页面的
<script type="text/javascript">
var editorHeight = 380;
    KE.init({
        id:'_contentEditor',
        shadowMode:false,
        autoSetDataMode:false,
        allowPreviewEmoticons:false,
        loadStyleMode:false,
        width:'100%',
        height:editorHeight,
        resizeMode:0
    });
</script>

一样还是有问题。看来和KE.init()这个函数没有关系。

这个问题以前很多人碰到过，JS放在动态加载的HTML里执行会有问题的。

 

http://www.kindsoft.net/doc.php?cmd=qna#002

还有我发现很多同学直接把javascript代码放在ajax返回的HTML页面里执行，这么做可能出现不可预测的错误，最好的方法是ajax只返回纯HTML，返回成功后在该ajax方法的回调函数（callback function）里执行javascript。

找到问题的原因了：

在创建KindEditor的时候，另外有一段代码也同时在同时运行ajax请求并且将请求的内容填充到一个DIV中，如果将KindEditor的创建放到那个ajax请求执行将填充完之后再执行就没有这个问题了。

像这样在Ajax返回的HTML中操作的应用场景非常多。

 

应该是事件的影响问题，KindEditor是否考虑完善？