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

赞 (0)

相关推荐

  • xhEditor的异步载入实现代码

    我将会使用xheditor作为新的在线编辑器,我希望它可以能通过一个php函数就能调用如 复制代码 代码如下: function editor($content,$name){$editor=<<<EOT<textarea id="$name" name="$name" rows="10" cols="60">$content</textarea>EOT;  return $edito

  • AJAX实现简单的注册页面异步请求实例代码

    AJAX实现简单的注册页面异步请求实例代码

    AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. (4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面.  简单布局 JS先判断,把前端可以的判断做,减少服务器的交互 $('button').on('click',function(){; var boolu

  • java webApp异步上传图片实现代码

    如何实现java webApp异步上传图片,先了解以下几个问题: 1.图片上传: 2.图片上传预览: 3.上传图片更改地址异步添加到数据库: 主要内容 本示例主要采用纯HTML前端和JavaScript代码作工具,查询有关demo其实现图片上传的代码范例如下: (1)点击上传图片的div代码: <div id="div1" class="photo"> <input type="file" id="choose&quo

  • js实现异步循环实现代码

    问题 实现异步循环时,你可能会遇到问题. 让我们试着写一个异步方法,一次循环打印一次循环的索引值. <script> for(var i = 0; i < 5; i++){ setTimeout(function(){ document.writeln(i);document.writeln("<br />"); },1000); } </script> 如上程序的输出为: 5 5 5 5 5 原因 每次时间结束(timeout)都指向原始的i

  • 最短的javascript:地址栏载入脚本代码

    不过脚本比较长的时候,需要复制密密麻麻一大段到地址栏里,显得很不美观,而且脚本修改起来也很不容易.因此一般先把脚本写在单独一个文件里,然后用javascript: 的形式动态载入脚本到页面中.不少网页插件都是用这个方法载入. 平时,我们用最简单的代码实现动态载入: 复制代码 代码如下: javascript:var o=document.createElement('script');o.src='...';document.body.appendChild(o);void(0) 当然,这对于载

  • JAVA实现异步调用实例代码

    在JAVA平台,实现异步调用的角色有如下三个角色: 调用者 取货凭证   真实数据 一个调用者在调用耗时操作,不能立即返回数据时,先返回一个取货凭证.然后在过一断时间后凭取货凭证来获取真正的数据. 在调用一个方法的时候,程序会进入被调用方法体内,执行完这个被调用方法后,才返回执行下一条语句.怎么做到像ajax异步请求一样,发送请求后,没等请求响应就执行下一条语句呢?对于java的异步请求,找了许多教材都没有找到,如thinking in java.core java2 ......等等.受多线程

  • JS 实现完美include载入实现代码

    js为什么需要include?让我们想想这样1个场景,a.js 需要用到1个公用的common.js,当然你可以在用到a.js的页面使用<script src="common.js">,但假设有5个页面用到了a.js,你是不是要写5遍<script.而且要是以后a.js 又需要引用common2.js,你是不是又的修改5个页面了? 已有js include的一些问题 在写这个之前在网上搜索了些资料,发现以前写的include都存在2个问题,这也是include需要解决

  • asp.net+ajaxfileupload.js 实现文件异步上传代码分享

    由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码 代码如下: /*修改头像*/      //上传      function _sc() {          $(".ckfile").html("").css("color", "#535353");          $("#_userImgPath").val("");     

  • python实现异步回调机制代码分享

    1 将下面代码拷贝到一个文件,命名为asyncore.py 复制代码 代码如下: import socketimport selectimport sys def ds_asyncore(addr,callback,timeout=5):    s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)    s.connect(addr)    r,w,e = select.select([s],[],[],timeout)    if r:     

  • jquery异步请求实例代码

    1.用ajax jsp代码如下: 复制代码 代码如下: $.ajax({ type:"get", dataType:"json", url:"<%=basePath%>actionSmUser.do?method=getUserMsgByUserId", data:"userId="+userId, success:function(msg){ var data = eval("("+msg.r

随机推荐