xhEditor的异步载入实现代码
我将会使用xheditor作为新的在线编辑器,我希望它可以能通过一个php函数就能调用如
function editor($content,$name)
{
$editor=<<<eot
<textarea id="$name" name="$name" rows="10" cols="60">$content</textarea>
eot;
return $editor;
}
这样做的好处有:
1,不用每次调用xheditor编辑器,都在前面写一大
2,调用方便,模板上就放返回的html代码的变量就可以了。
我使用的方法是用jquery里的get()方法异步xheditor的代码,然后再用eval把代码运行了。
如下:
function editor($content,$name)
{
$editor=<<<eot
$(document).ready(
function(){
if(!$.isfunction($.xheditor))
{
$.get(
'../xheditor.js',
function(data){
eval(data);
}
);
}
$('#{$name}').xheditor(true);
}
);
<textarea id="$name" name="$name" rows="10" cols="60">$content</textarea>
eot;
return $editor;
}
以上代码正确情况下,你是运行不了。
因为xheditor的0.9.8版在异步载入时会出现问题。导致xheditor不能正常显示。
原因:
由于jsurl是通过获取页面的来得到的。但我是采用异步加载的,所以我需要指定jsurl的地址。
补丁:
打开xheditor.js找到以下代码
var defaults={skin:"default",tools:"full",internalscript:false,inlinescript:false,internalstyle:false,inlinestyle:true,showblocktag:false,forceptag:true,keepvalue:true,uplinkext:"zip,rar,txt",upimgext:"jpg,jpeg,gif,png",upflashext:"swf",upmediaext:"avi",modalwidth:350,modalheight:220,modaltitle:true};
改为
var defaults={skin:"default",tools:"full",internalscript:false,inlinescript:false,internalstyle:false,inlinestyle:true,showblocktag:false,forceptag:true,keepvalue:true,uplinkext:"zip,rar,txt",upimgext:"jpg,jpeg,gif,png",upflashext:"swf",upmediaext:"avi",modalwidth:350,modalheight:220,modaltitle:true,editorurl:null};
其实就是增加了editorurl的默认值
然后再找到
this.settings=$.extend({},defaults,options);
在其后面添加
jsurl= this.settings.editorurl||jsurl;
用于设置jsurl是使用默认值还是用户自定义的目录
以后在调用xheditor时就多了一个参数
editorurl
编辑器所在的url路径,该路径必须带有“/”,默认值为null
在浏览器里打开根目录的load_xheditor.html
上一篇: 获取Lua表结构(table)数据实例
下一篇: 基于canvas实现超炫酷的流水灯效果