在一些界面的开发中，我们使用ajax的方【版权所有，侵权必究】未经授权，禁止复制转载。法保证页面无刷新的操作，这样可以让操作更未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net流畅。但是有一个问题，通过ajax的方法原创内容，盗版必究。本文作者：唐霜，转载请注明出处。请求一个页面，把抓取到的节点加载到当前页转载请注明出处：www.tangshuang.net【未经授权禁止转载】面的DOM中，这时新加载的dom节点并没原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。有在当前页面的js初始化过程中绑定事件响【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】应，因此，新加载进来的这些元素不会完成当未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。前页面的原始操作。

那么怎么解决这个问题呢？方法很简单，即【关注微信公众号：wwwtangshuangnet】新加载DOM结束之后，再次执行绑定动作，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。让新加载的节点元素也可以响应事件。

在get到这个点之后，我们再来看下tin【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ymce的具体实践情况。

首先，我们有一个页面a.html，在b.【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.nethtml中有一个textarea需要加载转载请注明出处：www.tangshuang.net【作者：唐霜】tinymce作为富文本编辑器。我们希望未经授权，禁止复制转载。【本文首发于唐霜的博客】在a.html中，通过一个弹出层，把b.【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】html加载进来，在a.html中操作这【作者：唐霜】【原创不易，请尊重版权】个富文本区域，实现表单提交。就像：

那么我们要怎么来实现呢？【版权所有，侵权必究】

我们在a.html中，使用下面的js来实【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net现ajax重新绑定事件：

$('#open').click(function(e) {
  e.preventDefault();
  $.get('b.html',function(result) {
    var html = $(result).find('#form');
    $('#dialog').html(html).show(); // 将抓取到的html元素加入到a.html的#dialog节点中，并且把#dialog显示出来
    
    var options = { 
      // tinymce的配置项
    }
    $('#editor').tinymce(options); // 注意，editor的b.html中textarea的id值
  });
});

这样，每次在点击#open这个按钮的时候原创内容，盗版必究。【转载请注明来源】，就会先请求b.html，并将抓取到的h著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】tml元素作为内容加载到弹出层中显示出来【本文受版权保护】著作权归作者所有，禁止商业用途转载。，并且重新绑定新加载的dom的编辑器事件【本文首发于唐霜的博客】【版权所有，侵权必究】，展示富文本编辑器。

可是有一个严重的问题，估计这个问题很多情【作者：唐霜】【本文首发于唐霜的博客】况下都会出现，不单单是tinymce。那【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】就是dom中是否已经存在有对应的tiny原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】mce.editors？

我们要从内存的角度去分析这个问题。当ti【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netnymce被初始化之后，富文本编辑器的渲著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。染结果已经以dom节点的形式存在与内存中【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net，每一个富文本编辑器对应的dom节点由产【转载请注明来源】【转载请注明来源】生该编辑器的textarea的id值（或【版权所有，侵权必究】【本文首发于唐霜的博客】其他选择器值）决定。这也就让tinymc【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。e开发者决定，在第二次打开tinymce本文作者：唐霜，转载请注明出处。【转载请注明来源】时，只需要从内存中取出对应的操作，将它再【作者：唐霜】【原创内容，转载请注明出处】绑定到渲染出来的dom节点上去。

而这个操作，直接影响了我们上述代码的最终【原创不易，请尊重版权】【版权所有，侵权必究】执行效果。因为我们第一次执行$('#editor').tinymce(options);时是ok的，会自然看到富文本编辑器。但是转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，当我们关闭弹出层，第二次点击#open转载请注明出处：www.tangshuang.net【本文受版权保护】时，会发现，编辑器处一片空白，编辑器没有【版权所有，侵权必究】【版权所有，侵权必究】被加载。这是什么原因呢？

原来，在第二次打开弹出层时，我们通过aj【版权所有，侵权必究】【原创不易，请尊重版权】ax去抓取到html元素加载进来之后，t转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】inymce不会做任何操作。为什么呢？因【关注微信公众号：wwwtangshuangnet】【作者：唐霜】为在内存中tinymce已经实例化了#e【本文受版权保护】【原创内容，转载请注明出处】ditor这个textarea，tiny本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。mce认为不需要再实例化一次。可是实际上转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，当tinymce实例化一个编辑器时，会【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】通过加载一些新的<div>节未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net点，来实现编辑器的皮肤效果，比如编辑器的【作者：唐霜】【原创内容，转载请注明出处】工具按钮等；而如果我们通过ajax再次加【原创不易，请尊重版权】【版权所有，侵权必究】载得到的html中，并没有这些<d【未经授权禁止转载】原创内容，盗版必究。iv>节点，而tinymce又不再【作者：唐霜】【原创不易，请尊重版权】次实例化#editor，所以实际上，现在【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。的dom中，是不存在编辑器皮肤相关的&l转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】t;div>节点的，所以，我们当然转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。看不到我们熟悉的编辑器界面。

那么怎么解决这个问题呢？第一种方法是，我【原创不易，请尊重版权】【未经授权禁止转载】们仅第一次点击#open的时候把b.ht【作者：唐霜】【版权所有，侵权必究】ml的内容加载进来，第二次点击#open转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】的时候，不要再去抓取，而是直接打开原来加【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。载好的，这个方法可以称为“缓存法”。但是【本文受版权保护】【作者：唐霜】，缓存法会导致当b.html得到更新时，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。a.html打开的内容不即时。比如，原本转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。textarea中没有任何内容，可是在第【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】二次打开的时候textarea实际上又被著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】增加了内容，这样的话，在a.html的缓未经授权，禁止复制转载。【转载请注明来源】存中，并不存在这些内容，导致提交表单的时【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net候会覆盖原来添加的内容。

第二种方法则是我们本文要讲的重新绑定的方本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】法，可以称为“重载法”。什么意思呢？就是【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】取消tinymce对内存中是否存在相关节【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。点的判定，每次执行$('#editor').tinymce(options);时，都往内存中增加新节点（同时销毁原有节本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。点）。当然，这种方法是比较消耗资源的，会【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】反复的消耗内存，因此只在必要的时候这样子本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】去操作。

$('#open').click(function(e) {
  e.preventDefault();
  $.get('b.html',function(result) {
    var html = $(result).find('#form');
    $('#dialog').html(html).show(); // 将抓取到的html元素加入到a.html的#dialog节点中，并且把#dialog显示出来
    var options = {
      // tinymce的配置项
    }
    tinymce.execCommand('mceRemoveEditor',true,'editor'); // tinymce 4.0+
    $('#editor').tinymce(options); // 注意，editor的b.html中textarea的id值
  });
});

和第一段代码相比，多了上面红色的部分。这【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】一句表示，将内存中原有的通过#edito【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。r创建的tinymce资源销毁，一旦销毁转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，那么下面的tinymce就会再执行in【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netit动作了。注意一个细节，上面的R著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net17;editor’不是&#【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。8217;#editor’，【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】该句操作不依赖jquery的语法，而ex本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ecCommand的第三个参数是edit本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netor_id的意思，也就是textarea【转载请注明来源】原创内容，盗版必究。的id属性值。另外，4.0+版本才使用&【本文受版权保护】【版权所有】唐霜 www.tangshuang.net#8217;mceRemoveEdito【转载请注明来源】【原创内容，转载请注明出处】r’参数，3.0+版本则使用原创内容，盗版必究。【本文首发于唐霜的博客】’mceRemoveControlR【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。17;参数，注意区别。

除了tinymce，很多插件都是这样，比【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。如幻灯、瀑布流、评论框等等，当你使用aj【未经授权禁止转载】【本文首发于唐霜的博客】ax去请求新内容时，一定要记住，新加载的【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net节点，需要重新绑定原有的事件响应。

2016-03-04 7464 ajax, tinymce, 富文本编辑器