在叠加层中使用TinyMCE(jQuery Tools-Overlay)

问题描述

我想在覆盖对话框中使用TinyMCE编辑器.可以吗?

I want to use TinyMCE editor in a overlay dialog.. Is that possible?

我有最新版本的TinyMCE和Jquery Tools Overlay.

I have latest version TinyMCE and Jquery Tools Overlay.

JQuery工具覆盖: http://flowplayer.org/tools/demos/overlay/index.html

JQuery Tools Overlay: http://flowplayer.org/tools/demos/overlay/index.html

推荐答案

我对此遇到了一些问题，显然tinymce不能很好地与隐藏元素配合使用，并且在覆盖它所附加的元素时会感到困惑.无论如何，通过使用overlay的钩子，进行 synchronous js调用(这是关键部分)，并在关闭它之前拆下tinymce，使其能够正常工作.代码:

I ran into a few issues with this, apparently tinymce doesn't play nicely with hidden elements, and gets confused when you write over elements it's attached to. Anyway, got it to work by using overlay's hooks, making a synchronous js call (this is the crucial part), and detaching tinymce before closing it. Code:

$(".overlayed").overlay({
  onBeforeLoad: function() {
    var wrap = this.getOverlay().find(".contentWrap");
    var url = this.getTrigger().attr("href");
    $.ajax({
      url: url,
      async: false,
      dataType: "html",
      type: "GET",
      success: function(data){
        wrap.html(data);
      }
    })
  },
  onLoad: function(){
    if($('#overlay .mceEditor').length > 0){
      tinyMCE.execCommand('mceAddControl', false, $('.mceEditor').attr('id'));
    }
  },
  onBeforeClose: function(){
    if($('#overlay .mceEditor').length > 0){
      tinyMCE.execCommand('mceFocus', false, $('.mceEditor').attr('id'));
      tinyMCE.execCommand('mceRemoveControl', false, $('.mceEditor').attr('id'));
    }
    this.getOverlay().find(".contentWrap").html("");
  }
});

代码可能更优雅，但100％的时间有效；)
希望这对某人有帮助！

Code could be more elegant but works 100% of the time ;)
Hope this helps someone!

这篇关于在叠加层中使用TinyMCE(jQuery Tools-Overlay)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！