Utilice TinyMCE en una superposición (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

preguntado el 09 de enero de 11 a las 10:01

Have you tried? Where did you fail? -

Yes, I've used normal way to get it work.. Example: <textarea id="textarea"></textarea> <-- this is inside the overlay.. and then I use tinyMCE.init function get it work work.. nothing happen.. no js error.. -

1 Respuestas

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 sincrónico 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 ;)
Espero que esto ayude a alguien!

Respondido 03 ago 11, 17:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.