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

• xhEditor
• 异步载入

相关文章

• fckeditor编辑器在php中的配置方法

  fcKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点 2012-05-05

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

  这篇文章对于使用fckeditor编辑器的朋友是个不错应用，主要介绍的是js对fckeditor的取值与赋值操作，fckeditor是个不错的比较方便的扩展功能的编辑器。 2010-05-05

• UEditor编辑器自定义上传图片或文件路径的修改方法

  这篇文章主要介绍了UEditor编辑器自定上传图片或文件路径的方法,需要的朋友可以参考下 2014-05-05

• 伪静态下不能使用FCKeditor的解决方法

  为了SEO，伪静态现在很流行，其中一些朋友采用URLRewriter.dll + IIS设置 .html读取ASPX页 2010-11-11

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

  FCKEditor网页编辑器 几点使用心得，需要的朋友可以参考下。 2009-10-10

• Office文档在线编辑的一个实现方法

  因为项目的关系，研究了一下Office的在线编辑功能，写出来共享一下。 2010-06-06

• dedecms5.5 最新版ckeditor编辑器整合教程

  CKEditor是fckeditor的3.0版。经过近两年的紧张开发，第一个CKEditor 3.0稳定版本终于发布。 2009-12-12

• 百度ueditor组件上传图片后如何设置img里的alt属性

  百度ueditor组件，使用上传图片后，设置了一个alt属性，其值是上传图片时的本地路径，如果想更改的话可以参考下面的解决方法 2014-09-09

• FCK判断内容是否为空(如果只是去空格，那么这种方式是错误的)

  一般来说，像input里面的值都可以通过将内容去空格判断是否为空，但是FCK没那么简单，因为当你多打几个空格或者多打一些回车，它会自动地生成一些p> 标签，如果再用原先去空格判断的方法，显然是不可取的。 2010-12-12

• nicedit 轻量级编辑器 使用心得

  NicEdit是一个轻量级，跨平台，内置内容编辑器，允许在浏览器中轻松地编辑网站上的内容。 2009-06-06

最新评论

大家感兴趣的内容

• 119款Javascript富文本网页编辑器
• 2免费开源百度编辑器(UEditor)使用方法
• 3eWebEditor 辑器按钮失效 IE8下eWebEdit
• 4CKEditor/FCKEditor 使用 CKeditor
• 5彻底解决ewebeditor网站后台不能上传图片的方法
• 6javascript 在线文本编辑器实现代码
• 7解决FCKEditor在IE10、IE11下的不兼容问题
• 8asp.net+FCKeditor上传图片显示叉叉图片无法显
• 9页面嵌入Windows Media Player播放器代码需
• 10UEditor编辑器自定义上传图片或文件路径的修改方法

最近更新的内容

• ckeditor自定义插件使用方法详解
• Prism 代码高亮修改不包含 Code 标签的支持
• xhEditor编辑器入门基础
• ie9后浏览器fckeditor无法上传图片、弹出浮层内容不显示的解决方法
• fckeditor在ie9中无法弹出对话框的解决方法(弹出层兼容问题)
• ckeditor 简单配置方法
• Windows Live Writer 实现代码高亮
• FCKeditor smarty 编辑器的应用PHP
• fckeditor 防止上传非法文件 增加登录判断
• ajax php实现给fckeditor文本编辑器增加图片删除功能

常用在线小工具

关注微信公众号

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 版权所有

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！