xhEditor的异步载入实现代码
时间:2022-01-29 10:40:28
我将会使用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
文件打包
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
用Python实现写倒序输出(任意位数)
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
![](https://img.aspxhome.com/file/2023/3/100863_0s.gif)
基于Python3.7.1无法导入Numpy的解决方式
![](https://img.aspxhome.com/file/2023/5/112965_0s.jpg)
Python实现迷宫自动寻路实例
![](https://img.aspxhome.com/file/2023/0/133310_0s.jpg)
tensorflow常用函数API介绍
![](https://img.aspxhome.com/file/2023/4/72714_0s.png)
pycharm导入第三方库的两种方法(永不报错)
![](https://img.aspxhome.com/file/2023/1/70841_0s.jpg)
python反爬虫方法的优缺点分析
![](https://img.aspxhome.com/file/2023/3/86493_0s.jpg)
Python之lambda匿名函数及map和filter的用法
简明 Python 基础学习教程
python局域网ip扫描示例分享
Python类的继承、多态及获取对象信息操作详解
如何从Python的cmd中获得.py文件参数
![](https://img.aspxhome.com/file/2023/3/131273_0s.png)
Django form表单与请求的生命周期步骤详解
Python合并重叠矩形框
![](https://img.aspxhome.com/file/2023/0/112460_0s.png)
Python3中的re.findall()方法及re.compile()
Python基础之dict和set的使用详解
![](https://img.aspxhome.com/file/2023/8/65068_0s.png)
window安装mysql(zip、noinstall)
定义列表 dt dl
![](https://img.aspxhome.com/file/UploadPic/20088/3/200883171832109s.png)
Python3爬取英雄联盟英雄皮肤大图实例代码
![](https://img.aspxhome.com/file/2023/5/83935_0s.png)