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

时间: 2024-09-21 08:31:48

xhEditor的异步载入实现代码_网页编辑器的相关文章

FCKEditor+jQuery+PHP实现分页代码_网页编辑器

一.插入新闻 FCKEditor是一款很流行的即插即用WEB编辑器,它支持ASP.PHP.Java等语言.这里要介绍的是利用编辑器的"插入分页符"功能,实现页面的无刷新分页. 编辑新闻时,在需要插入分页的段落处插入分页符,保存即可. 二.读取新闻 在读取新闻字段时,通过PHP分页函数对新闻字段数据进行处理,代码如下: 复制代码 代码如下: function pageBreak($content) { $content = $content; $pattern = "/<

asp.net 为FCKeditor开发代码高亮插件实现代码_网页编辑器

所以就为FCKeditor写了个InsertCode的插件.整个插件的制作过程非常简单:FCKeditor插件开发请参考FCKeditor官网的文档: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins 首先,我们在FCKeditor/editor/plugins目录下新建一个insertcode目录,并在insertcode目录下新建一个fckplugin.js文件. 在新建的fckpl

宝丽通实现连续播放实现代码_网页编辑器

可以用JS来监控播放器的事件,如果播放完毕了,就用Js跳转到下一集的播放页面, 这样就可以间接实现连续播放了 复制代码 代码如下: PlayStateChange(newState) newState 0:已停止 1:已停止 2:暂停 3:正在播放 6:正在缓冲 8:播放完毕 11:重新连接 实际应用举例:  复制代码 代码如下: <SCRIPT LANGUAGE=javascript FOR=ActiveX EVENT=PlayStateChange(newState)> if(newSta

在kindEditor中获取当前光标的位置索引的实现代码_网页编辑器

呵呵,有这个说明他自己有获取光标位置的办法,然后顺藤摸瓜找到了,拿出来分享一下. 下面editor.cmd.range.startOffset部分就是了. 复制代码 代码如下: var editor;KindEditor.ready(function () { editor = KindEditor.create("#txt_content"); alert(editor.cmd.range.startOffset);} ); 另: 还发现有个editor.cmd.range.endO

fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码_网页编辑器

content相当于你例子中的FCKeditor1. 复制代码 代码如下: //获取格式化的编辑器内容 function getEditorContents(){ var oEditor = FCKeditorAPI.GetInstance("content"); alert(oEditor.GetXHTML(true)); } //向编辑器插入指定代码 function insertHTMLToEditor(codeStr){ var oEditor = FCKeditorAPI.G

FCKEditor 表单提交时运行的代码_网页编辑器

复制代码 代码如下: for( var name in FCKeditorAPI.Instances){ var oEditor=FCKeditorAPI.Instances[name]; if( oEditor.GetParentForm && oEditor.GetParentForm()==this ) oEditor.UpdateLinkedField(); }

FCKEditor常用Js代码,获取FCK内容,统计FCK字数,向FCK写入指定代码_网页编辑器

content相当于你例子中的FCKeditor1. 复制代码 代码如下: //获取格式化的编辑器内容 function getEditorContents(){ var oEditor = FCKeditorAPI.GetInstance("content"); alert(oEditor.GetXHTML(true)); } //向编辑器插入指定代码 function insertHTMLToEditor(codeStr){ var oEditor = FCKeditorAPI.G

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

获取编辑器中HTML内容 复制代码 代码如下: function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } 获取编辑器中文字内容 复制代码 代码如下: function getEditorTextContents(EditorName) { var oEditor = FCKeditorAPI.G

FCKeidtor 清除编辑器内容的代码_网页编辑器

复制代码 代码如下: var editor = FCKeditorAPI.GetInstance("content"); editor.EditorDocument.body.innerHTML="";