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

  文件打包