此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享.

不得不说,百度ueditor是一款很好的在线编辑器,为开发者提供了诸多便利,你甚至可以用它来把word文档的内容按照一定的格式转换成html代码,然后再放进自己的项目中.

1.我们的项目中,用户在注册时有可能需要查看用户协议和隐私协议,而我们的文案是将这两个协议的内容放在word文档中,作为苦逼的开发人员,你需要把这些文字展示在html页面上,并且保持一定的样式,例如首行缩进,行距等等;

这里有两个解决方案:

第一种------word文档可以直接转换成html.不错,是有这个功能,但是经过本人亲测,2010版本的并不好用,但是word2003还不错.

第二种------我当时采用的方法就是利用word与notepad++协作调好文档的格式,再将调好格式的文档内容拷贝到ueditor编辑器.生成html代码,然后C V大法,扔进需要展示的html页面,在浏览器预览进行微调就可以了.至于怎么生成html代码,你可以看到博客园TinyMCE编辑器的工具栏处,有一个写有html的按钮.ueditor也如此,点击即可生成html代码,

这两种方法,请大家自行去比较哪种方便,哪种适合你.....

2.该说说今天这篇博客的主题了,那就是在使用ueditor时,实例化编辑器遇到的问题.

来到百度ueditor官网,下载一个你需要的版本(java,php等),页面头部引入如下标签,

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>//这里为了方便看源码,就不引用min.js了
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

然后在html body标签里面写下如下代码,你的ueditor应该就实例化成功了(我的页面上有至少2个ueditor编辑器,先将它定义为编辑器页面)

<body>

<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

<script id="editor1" type="text/plain" style="width:1024px;height:500px;"></script>

<script>

var editor=UE.getEditor('')

var editor1=UE.getEditor('')

</script>

</body>

随后,当我在第一次进入该页面时,采用编辑器内置的方法setContent,给编辑器设置初始值(成功了):

editor.ready(function(){//监听编辑器实例化完成的事件

console.log('编辑器1实例化完成')

editor.setContent('嘿嘿')

})

editor.ready(function(){

console.log('编辑器2实例化完成')

editor1.setContent('哈哈')

})

但是当我点击浏览器的后退键返回上一个页面(或者是点击页面上自己设置的后退按钮返回上一个页面)后,再一次进入到编辑器页面,同样调用

editor.setContent('嘿嘿')

editor1.setContent('哈哈')

的方法,浏览器控制台就报错了 Cannot set property 'innerHTML' of null .意思就是需要赋值的对象是null(但为什么没有报undefined呢?答案接下来分析)

而且奇葩的是,editor编辑器内容赋值成功,但是editor1赋值失败.

思前想后,还是去看看ueditor的源码吧.

UE.getEditor = function (id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);
}
return editor;
};
源码里的instances是一个初始化的空对象

代码的意思就是:先去页面找是否存在已经实例化的编辑器对象,如果没有,就新生成一个编辑器.否则直接将页面上找到的那个编辑器给返回.再联想到刚才的报错Cannot set property 'innerHTML' of null(而不是undefined,而且控制台也没有输出编辑器2实例化完成),那么真相只有一个! 那就是当你在一次来到编辑器页面时,编辑器早已经存在,都已经存在的编辑器,自然不会触发ready事件,所以自然不能触发卸载ready事件里的setContent事件了.

好奇的小伙伴一定会想到,既然编辑器已经存在了,那么我们把setContent函数调到ready事件外,不就行了吗!!!!  然而,并没有任何luan用.....(设置setTimeout也不行)

按照我的猜想,此时当你第二次或者第三第四....次进入编辑器页面,虽然页面上存在这第一次你进入该页面时的那个实例化好的编辑器,但是现在的它,功能并不完整了,你可以理解成汽车没了发动机,残疾了哎.

好了,找到了问题的根本,那么我们就来解决问题吧,方法也有两个:

1.我的页面既然有返回的按钮,那么我只需要在每次点击返回的时候,将页面上的ueditor对象销毁了,这样一来,下次再进入到此页面,就会重新实例化一个功能健全的ueditor了,

2.上面的解决办法是从表象上去组织可能错误的发生,可以说是治标不治本,因为一些用户的操作习惯是直接点击浏览器的后退按钮回到上一个页面,下次进入到编辑器页面,同样会遇到之前的问题.当然大家也可以利用js动态去判断浏览器的地址,从而决定应该何时销毁编辑器对象,相信这个方法也是可以的.

不过我想说的是,我们就来点简单粗暴的方法吧,ok,再回到ueditor源码

UE.getEditor = function (id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);
}
return editor;
};

我们可以跳过上面代码的判断,每一次直接根据js传来的id,生成一个全新的ueditor对象.所以上述代码可以改成:

UE.getEditor = function (id, opt) {

UE.delEditor(id);
var editor = new UE.ui.Editor(opt);
editor.render(id);
return editor;
};

最后附上销毁ueditor的一个方法:(UE.delEditor('editor'))

UE.delEditor = function (id) {
var editor;
if (editor = instances[id]) {
editor.key && editor.destroy();
delete instances[id]
}
};

最后与大家共勉一句话:每当你撸代码累了的时候,想想你上次解决困扰已久的bug的那种快感吧~

百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案的更多相关文章

  1. （转）Uncaught TypeError: Cannot set property 'innerHTML' of null

    (转)http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候,会爆出这样的错误: 浏览器控制台就报错了 Cannot set p ...

  2. Uncaught TypeError: Cannot set property 'innerHTML' of null

    学习Chrome插件时,要在弹出页面中显示当前时间,结果怎样也显示不出来 看了 http://www.cnblogs.com/mfryf/p/3701801.html 这篇文章后感悟颇深 通过调试发现 ...

  3. 错误：Cannot set property 'innerHTML' of null

    360浏览器代码编辑器里提示错误:Cannot set property 'innerHTML' of null 原因是代码执行时要调用的内容不存在

  4. Cannot set property 'innerHTML' of null 问题的解决

    错误第一次写web 前端代码,出现了“Cannot set property ‘innerHTML’ of null”的错误代码,然后不知道原因在哪? 解决方案在网上查了下资料,原来是js 代码从上往 ...

  5. JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...

  6. day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    转行学开发,代码100天.初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误. -"Uncaught TypeErro ...

  7. Cannot set property 'innerHTML' of null

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 看如下错误代码: 知道是加载的问题就好解决了

  8. js-Cannot read property 'innerHTML' of null

    原因:1.$('#xxx') 或$('.xxx')不存在 2.$('#xxx')或$('.xxx')的值为空

  9. js执行函数报错Cannot set property 'value' of null怎么解决？

    js执行函数报错Cannot set property 'value' of null 的解决方案: 原因:dom还没有完全加载 第一步:所以js建议放在body下面执行, 第二步:window.on ...

随机推荐

  1. ASP.NET5 Beta8可用性

    ASP.NET5 beta8现已上都的NuGet作为一个工具升级到Visual Studio2015!此版本极大地扩展.NET核心对OS X和Linux所支持的范围.您现在可以使用网络,加密和全球化特 ...

  2. .NET使用Com组件的一点点教训笔记~

    中控IFACE系列的产品,二次开发包 zkemkeeper.dll 在system32 ,SySWoW64都注册了,就是他妈的用不了. 最后,在 system32 ,SySWoW64 注册了,然后把需 ...

  3. js从服务器下载文件

    通常,将文件绝对路径url作为超链接<a>的链接地址href的值,点击<a>后,浏览器将会尝试请求文件资源,如果浏览器能够辨认文件类型,则将会以预设的打开方式直接打开下载的文件 ...

  4. PHP-redis中文文档介绍（转自http://www.jb51.net/article/33887.htm）

    Redis::__construct构造函数$redis = new Redis(); connect, open 链接redis服务参数host: string,服务地址port: int,端口号t ...

  5. 【转】Win7 64bit Oracle 11g 使用PL/SQL Developer 连接时提示“SQL*Net not properly installed”

    转载:http://www.cnblogs.com/xihuaodc/p/3189257.html  因为之前的Oracle不能用了,所以重新安装了64位的Oracle,安装一路正常 完了之后安装了P ...

  6. Tomcat单向Https验证搭建，亲自实现与主流浏览器、Android/iOS移动客户端安全通信

    众所周知,iOS9已经开始在联网方面默认强制使用Https替换原来的Http请求了,虽然Http和Https各有各的优势,但是总得来说,到了现在这个安全的信息时代,开发者已经离不开Https了. 网上 ...

  7. 图片javascript缩小

    function SetSize(obj, width, height) { myImage = new Image(); myImage.src = obj.src; if (myImage.wid ...

  8. Linux字符串截取和处理命令 cut、printf、awk、sed、sort、wc

    1. cut [选项] 文件名 -f  列号 #提取第几列(分隔符默认为\t) -d  分隔符 #指定分隔符 例如:cut -f 2 a.txt #截取文件a.txt内容的第二列(列号从1开始) cu ...

  9. 用clock（）函数计算多项式的运行时间

    百度百科中定义clock():clock()是C/C++中的计时函数,而与其相关的数据类型是clock_t.在MSDN中,查得对clock函数定义如下: clock_t clock(void) ; 简 ...

  10. CSS3制作各种形状图像

    圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框 不废话直接 html界面(亲测的) ------转自百 ...