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
文件打包

标签:xhEditor,异步载入
0
投稿

猜你喜欢

  • 用Python实现写倒序输出(任意位数)

    2023-06-12 17:46:33
  • Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计

    2023-09-25 13:01:40
  • 基于Python3.7.1无法导入Numpy的解决方式

    2022-10-27 20:50:01
  • Python实现迷宫自动寻路实例

    2021-12-22 10:00:44
  • tensorflow常用函数API介绍

    2022-10-18 17:49:54
  • pycharm导入第三方库的两种方法(永不报错)

    2022-08-28 14:21:57
  • python反爬虫方法的优缺点分析

    2023-09-07 11:38:02
  • Python之lambda匿名函数及map和filter的用法

    2021-01-14 02:11:18
  • 简明 Python 基础学习教程

    2023-01-05 13:02:05
  • python局域网ip扫描示例分享

    2022-10-19 08:43:45
  • Python类的继承、多态及获取对象信息操作详解

    2023-09-09 21:27:52
  • 如何从Python的cmd中获得.py文件参数

    2022-04-15 17:50:31
  • Django form表单与请求的生命周期步骤详解

    2023-06-20 06:29:15
  • Python合并重叠矩形框

    2023-06-11 02:33:41
  • Python3中的re.findall()方法及re.compile()

    2023-04-12 11:54:47
  • Python基础之dict和set的使用详解

    2022-01-16 04:15:08
  • window安装mysql(zip、noinstall)

    2009-10-17 21:10:00
  • 定义列表 dt dl

    2008-08-03 17:14:00
  • Python3爬取英雄联盟英雄皮肤大图实例代码

    2022-05-20 23:40:55
  • Django压缩静态文件的实现方法详析

    2023-06-15 05:31:33
  • asp之家 网络编程 m.aspxhome.com