手机
当前位置:查字典教程网 >编程开发 >网页编辑器 >xhEditor的异步载入实现代码
xhEditor的异步载入实现代码
摘要:我将会使用xheditor作为新的在线编辑器,我希望它可以能通过一个php函数就能调用如复制代码代码如下:functioneditor($c...

我将会使用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的异步载入实现代码】相关文章:

javascript fckeditor编辑器取值与赋值实现代码

FCKEditor 自定义用户目录的修改步骤 (附源码)

一款支持插入表情的编辑器实现代码(简单思路挺重要)

fckeditor 常用函数

FCKeditor 编辑器插入代码功能实现步骤

FCKeidtor 清除编辑器内容的代码

xheditor所见即所得文本编辑器(代码高亮显示修改)

FCKeditor .NET的配置、扩展与安全性经验交流

在kindEditor中获取当前光标的位置索引的实现代码

fckeditor 代码语法高亮

精品推荐
分类导航