xhEditor的异步载入实现代码

所属分类: 网络编程 / 网页编辑器 阅读数: 1327
收藏 0 赞 0 分享

我将会使用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
文件打包

更多精彩内容其他人还在看

Ewebeditor 文件上传问题

Ewebeditor 上传的文件要么是直接播放或显示的,要么是用固定的格式做一个链接。
收藏 0 赞 0 分享

PHP网页 Ewebeditor 编辑器嵌入方法

因为ewebeditor编辑器的功能强大,容易扩展等原因,一直是大家比较喜爱的编辑器,所以下面介绍下ewebeditor如何跟php结合。
收藏 0 赞 0 分享

FckEditor 上传图片后图片变小了!问题解决

我用fckeditor 上传图片时,只要图片一大,上传到服务器后就变小了,而且图片颜色也失真了。
收藏 0 赞 0 分享

fckeditor asp版本的文件重命名

最近不得不研究FCKEDITOR,而且是ASP版本。对其文件上传后的重命名,很郁闷。下面记录我修改的过程,部分函数来自网络。
收藏 0 赞 0 分享

FckEditor 中文配置手册

FckEditor 中文配置手册,对于fckeditor不是很熟悉的朋友可以看下。快速的掌握这个应用比较广泛的网页在线编辑器。
收藏 0 赞 0 分享

FCKEditor网页编辑器 几点使用心得

FCKEditor网页编辑器 几点使用心得,需要的朋友可以参考下。
收藏 0 赞 0 分享

FCK 编辑器焦点问题

在使用FCK编辑器的时候,我们经常会进行对FCK编辑器的赋值操作,赋值的操作有两个关键的地方,如果不清楚的话出了错还百思不得其解.
收藏 0 赞 0 分享

添加FCKeditor插件需要注意的地方

今天,在做程序的时候发现 FCKeditor功能并不强大(开始还不知道可以用插件,汗~),至少没有上传视频,专辑,音乐,水印等功能(以前我也修改过DVBBS的编辑器,也自定义了很多使用按钮).
收藏 0 赞 0 分享

javascript 获取FCKeditor内容

javascript获取FCKeditor内容,需要的朋友可以参考下。
收藏 0 赞 0 分享

eWebEditor 上传文件提示格式不正确的解决方法

eWebEditor上传个别图片时出现:请选择一个有效的文件,支持的格式有(GIF|JPG|JPEG|BMP|PNG)!,在WINDOWSXP下使用该组件正常,却在WINDOWS2003上提示
收藏 0 赞 0 分享
查看更多