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
投稿

猜你喜欢

  • 卷积神经网络经典模型及其改进点学习汇总

    2023-07-22 22:15:19
  • Logo 设计准则[译]

    2009-07-22 21:05:00
  • Django利用LogEntry生成历史操作实战记录

    2021-10-23 04:23:58
  • Python startswith()和endswith() 方法原理解析

    2023-05-30 02:16:06
  • Python完成毫秒级抢淘宝大单功能

    2023-09-29 04:14:54
  • 将Python的Django框架与认证系统整合的方法

    2022-05-09 20:33:15
  • 实操MySQL+PostgreSQL批量插入更新insertOrUpdate

    2024-01-17 09:06:19
  • vue学习笔记之动态组件和v-once指令简单示例

    2024-01-01 07:50:52
  • python读文件逐行处理的示例代码分享

    2023-03-17 03:54:04
  • javascript中caller和callee详解

    2024-04-29 13:38:05
  • python requests库爬取豆瓣电视剧数据并保存到本地详解

    2022-05-29 08:35:05
  • Python flask-script 模块详解

    2023-03-09 06:20:20
  • Python单元测试模块doctest的具体使用

    2021-02-26 16:50:12
  • Python MySQLdb 使用utf-8 编码插入中文数据问题

    2023-07-31 11:04:13
  • 基于javascript如何传递特殊字符

    2023-09-06 04:14:23
  • Pytorch自动求导函数详解流程以及与TensorFlow搭建网络的对比

    2023-07-08 18:44:37
  • mysql3升级到mysql5解决乱码心得

    2009-04-20 14:41:00
  • SQLserver 实现分组统计查询(按月、小时分组)

    2024-01-24 12:52:15
  • python实现视频压缩功能

    2023-12-14 02:48:36
  • window.print()局部打印三种方式(小结)

    2024-04-28 10:18:57
  • asp之家 网络编程 m.aspxhome.com