Use TinyMCE in an overlay (jQuery Tools-Overlay)

问题

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

I have latest version TinyMCE and Jquery Tools Overlay.

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

回答1:

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("");
  }
});

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

来源：https://stackoverflow.com/questions/4638632/use-tinymce-in-an-overlay-jquery-tools-overlay