事情是这样的,我在A页面的div通过 jQuery.load() 方法载入一个页面B时,B页面带有编辑框 textarea,现在想让这个 textarea 显示为一个 kindeditor的富文本编辑区域,但是怎么都不能成功,官网上的example根本就跑不起来。(也许是网络原因,或者其他)(官网example:http://kindeditor.net/ke4/examples/dynamic-load.html)
哎,心塞。
但是项目里已经有好几个地方都用这个编辑器,就不想换了(这些地方能跑成功的原因是页面直接调用kindeditor,而不是通过异步加载的方式)。
索性偶然瞥见其他编辑器也有出现这个问题,参考了别人的情况,终于成功实现了。
解决方法:不要在子页面B调用 KindEditor.create() ,而是在主页面A导入Editor的js包,在主页面的$.load() 的回调函数中创建编辑器。如果要使用编辑器的内容,则咋主页面设置全局变量 var editor; 将 KindEditor.create() 赋给 editor 就可以了,子页面B可以通过 editor.html() 来操作编辑器的内容。
代码:
主页面A.jsp
<script type="text/javascript" charset="utf-8" src="js/kindeditor-4.1.7/kindeditor-min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/kindeditor-4.1.7/lang/zh_CN.js"></script>
<div id="mainData" class="mainData">
<div id="dataContent"></div>
</div>
<script type="text/javascript">
var editor; //全局变量
$("#dataContent").load("B.jsp",function(){
editor = KindEditor.create('textarea[name="modelContent"]', { //这里的name是子页面对应的 textarea 的name属性值
width:'725px',
minHeight:360,
themeType : 'simple',
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
</script>
子页面B.jsp
<div id="tempcontent">
<textarea name="modelContent" id="tContent" ></textarea>
</div>
<script type="text/javascript">
editor.html(); //取值
editor.html("Hello!"); //赋值
</script>
附:帮助文档里的方法,总之我没用成功,不知道别的情况能不能成功
dynamic-load.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Dynamic Load Examples</title>
<style>
form {
margin: 0;
}
textarea {
display: block;
}
</style>
<script charset="utf-8" src="../lib/jquery.js"></script>
<script>
$(function() {
$('input[name=load]').click(function() {
$.getScript('../kindeditor-min.js', function() {
KindEditor.basePath = '../';
KindEditor.create('textarea[name="content"]');
});
});
$('input[name=remove]').click(function() {
KindEditor.remove('textarea[name="content"]');
});
});
</script>
</head>
<body>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7116729301372758";
/* 更多演示(728x90) */
google_ad_slot = "5052271949";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<h3>异步加载</h3>
<form>
<textarea name="content" style="width:800px;height:200px;"></textarea>
<p>
<input type="button" name="load" value="加载JS并创建编辑器" />
<input type="button" name="remove" value="删除编辑器" />
</p>
</form>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)