instancias TinyMCE en jquery ordenable

Question

Estoy perplejo y frustrado, así que es hora de pedir ayuda. He hecho muchas búsquedas en Google pero todavía no he encontrado una solución que me funcione.

Lo que tengo es un montón de divs que se pueden ordenar usando Jquery ordenable, algunos de los divs contienen una instancia de TinyMCE. Lo cual está bien hasta que trates de mover un div que contenga una instancia de TinyMCE. Cuando lo haces, TinyMCE parece refrescarse y crea una nueva instancia que luego pierdes los datos, etc. Y entonces toda la página se rompe porque el javascript ya no está disponible. trabajos :). Durante este tiempo obtengo errores de constructor de Javascript, etc. en Firebug.

Lo que he decidido que la mejor manera de ir es cuando el div comienza a ser arrastrado tinymce quitar del área de texto y cuando se coloca en su nueva tinymce posición de inserción de nuevo.

puedo quitarlo fina pero teniendo problemas para volver a agregarlo, a medida que obtengo más errores de constructor.

Nota: TinyMCE se agrega automáticamente a todas mis áreas de texto dentro del sistema que estoy usando para tratar de evitar jugar con TinyMCE.

En el siguiente código, solo estoy apuntando a una identificación de área de texto específica para fines de prueba.

$cols.sortable({ 
          cursor: 'move', 
          revert: true, 
          opacity: 0.6, 
          placeholder: 'widgetplaceholder', 
          forcePlaceholderSize: true, 
          connectWith: cols, 
          zIndex:9000, 
          cancel: ".collapsable_box_editpanel_groups, .collapsable_box_content", 
          start: function(e, ui) { 
            // removes tinymce ok from textarea 
            tinyMCE.execCommand('mceRemoveControl', false, 'textarea1'); 

          }, 
          stop: function(e,ui) { 
            // breaks here - constructor error 
            tinyMCE.execCommand('mceAddControl', true, 'textarea1'); 
            $(this).sortable("refresh"); 
          } 
        }); 

¿Alguien más tiene alguna otra solución? Si necesita más información, por favor permítame :)

Answer 1

No, no hay otra solución. Esta es la forma en que debe hacerse. Al manipular elementos dom que contienen instancias de tinymce, debe desactivarlos y reactivarlos cuando haya terminado con la operación dom usando mceRemoveControl y mceAddControl.

Answer 2

Para cualquier persona que intente asignar dinámicamente "textarea1", el objeto que se puede arrastrar se encuentra en el objeto ui como ui.item. Por un área de texto por sortable:

tinyMCE.execCommand('mceAddControl', false, $('textarea',ui.item)[0].id); 

tinyMCE.execCommand('mceRemoveControl', false, $('textarea',ui.item)[0].id); 

Answer 3

Hey si ya tiene datos de las instancias de MCE, para evitar perderlo, puede intentar esto:

start: function(e, ui){ 
    $(this).find('.tinyMCE').each(function(){ 
     tinyMCE.execCommand('mceRemoveControl', false, $(this).attr('id')); 
    }); 
}, 
stop: function(e,ui) { 
    $(this).find('.tinyMCE').each(function(){ 
     tinyMCE.execCommand('mceAddControl', true, $(this).attr('id')); 
     $(this).sortable("refresh"); 
    }); 
} 

en mi caso clasifican todas las Instancias de MCE con .tinyMCE

Answer 4

Para la versión 4 de TinyMCE

start: function (e, ui) { 
    $(ui.item).find('textarea').each(function() { 
    tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id')); 
    }); 
}, 
stop: function (e, ui) { 
    $(ui.item).find('textarea').each(function() { 
    tinymce.execCommand('mceAddEditor', true, $(this).attr('id')); 
    }); 
} 

Answer 5

tengo una forma dinámica con varios párrafos todo eso se puede editar con TinyMCE. Para permitir la reorganización de los párrafos, agregué botones que mueven las áreas de texto hacia arriba y hacia abajo.

Me las arreglé para que funcionara usando alt = "textareaid" en el botón que mueve un área de texto hacia arriba o hacia abajo, y usando este textareaid para los comandos mceRemoveEditor y mceAddEditor. El textarea tiene que estar en un div con class = "textarea_container".

$('.move_textarea_up').click(function(){ 
    var tinymceid= $(this).attr("alt"); 
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid); 
    $(this).closest('div.textarea_container').insertBefore($(this).closest('div.textarea_container').prev()); 
    tinyMCE.execCommand('mceAddEditor', false, tinymceid); 
}); 
$('.move_textarea_down').click(function(){ 
    var tinymceid= $(this).attr("alt"); 
    tinyMCE.execCommand('mceRemoveEditor', false, tinymceid); 
    $(this).closest('div.textarea_container').insertAfter($(this).closest('div.textarea_container').next()); 
    tinyMCE.execCommand('mceAddEditor', false, tinymceid); 
}); 

Answer 6

Para mí, la solución está aquí. Para la versión 4 de TinyMCE

Mi caso: estoy usando jQuery se puede ordenar con el campo de repetidor para la caja de meta wordpress interior. Cada elemento ordenable tiene textarea convertido en el editor tinyMCE.

Cuando estaba moviendo un elemento de los elementos clasificables, el editor dentro de ese solo elemento se rompe y no se muestra contenido en la pestaña visual . Solía ​​mceRemoveEditor y mceAddEditor para evitar problemas.

Así que llegué a esta solución final después de combinar algunas de las soluciones anteriores. Gracias a @Honorable Chow, @pragmar @Sonicdesign Bueno, tus soluciones no funcionaron para mí tal como son, así que las modifiqué. Aquí está mi código que funciona bien para mí.

start: function(e, ui){ 
     tinyMCE.execCommand('mceRemoveEditor', false, jQuery('textarea',ui.item)[0].id); 
    }, 
    stop: function(e,ui) { 
     tinyMCE.execCommand('mceAddEditor', false, jQuery('textarea',ui.item)[0].id); 
    } 

Answer 7

que tiene capaz de resolver un problema similar con:

tinymce.activeEditor.setMode ('sólo lectura');

y

tinymce.activeEditor.setMode ('diseño');

esto funciona para la versión 4.3.x

Answer 8

he hecho

$("#stores-container").sortable({ 

     stop: function(event, ui) { 

      textareaID = $(ui.item).find(' textarea').attr('id'); 

      textareaVal=$(ui.item).find(' textarea').val(); 

      editorID=$(ui.item).find('.mce-container').attr('id'); 

      $("#"+editorID).remove(); 

      $('#'+textareaID).show(); 
      tinymce.init({selector: '#'+textareaID}); 
     } 

    }); 

Answer 9

Bueno, una solución estable de este problema, por v.4 TinyMce + es:

start: function(e, ui){ 
     tinyMCE.triggerSave(); 
    }, 
    stop: function(e,ui) { 

     $(this).find('textarea').each(function(){ 
      tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); 

      // if your tinymce instance have different settings 
      tinymce.init(tinymce_settings($(this).attr('data-type'))); 

      tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); 
     }); 
    } 

Si su área de texto tiene más de un tipo de configuración aplicada, debe declarar tinymce.init(settings) antes de cada restablecimiento, de lo contrario, la última aplicación se aplicará a todos.

Una manera fácil de la variante aleatoria configuración es establecer un indicador de ajustes de tipo en el área de texto, tales como:

<textarea data-type="settings_one"></textarea> <textarea data-type="settings_two"></textarea>

y luego usar una función de cargador que se distrubute la necesaria una:

function tinymce_settings(type) { 

var settings; 

switch(type) { 

    case 'settings_one' : 
    settings = {...} 
    break; 
    }  
return settings; 
} 

Answer 10

start: function (e, ui) { 
    tinyMCE.execCommand('mceRemoveEditor', false, editor_id); 
}, 
stop: function (e, ui) { 
    tinymce.execCommand('mceAddEditor', true, editor_id); 
} 

Esto funciona genial solo utilicé para un editor. Muchas gracias :) .

Answer 11

Acabé y vuelva a crear la edición el tope ordenable() evento:

stop: function (e, ui) { 
    $(this).find('textarea').each(function() { 
    tinyMCE.get($(this).attr('id')).destroy(); 
    // the code below locates and evals the editor init script 
    eval($(this).parents('.item').find('script').html()); 
    }); 
} 

funciona como un encanto y es probablemente una opción mejor que otras sugerencias para destruir el editor de inicio del evento() y a continuación, vuelva a crear en stop() - porque de esta manera todavía está arrastrando el editor visualmente atractivo. PD Usando TinyMCE 4.5.2