TinyMCE - agregando un interruptor de palanca ON/OFF

Question

Estoy usando TinyMCE en las áreas de texto en mi sección de administración de Magento. Tengo mi editor TinyMCE visible desde el principio, pero quiero la opción de desactivarlo/volver a habilitarlo.

Estoy usando la versión del complemento jQuery, así que agregué algunas secuencias de comandos, que casi funciona. Sin embargo, solo está afectando a la primera instancia de TinyMCE; si hay otras instancias en la página, no se ven afectadas.

Utilicé este ejemplo http://tinymce.moxiecode.com/examples/example_23.php como base para lo que he hecho hasta ahora. Pero todavía no puedo entender por qué está afectando solo a la primera instancia. ¿Algunas ideas? Aquí está mi código:

var $j = jQuery.noConflict(); 
// Add ON OFF toggle switch 
$j(function() { 
$j('textarea').after("<br/><span class=\"toggle form-button\">Toggle TinyMCE</span>"); 
$j("span.toggle").toggle(function(){ 
$j('.wrapper').find('textarea').tinymce().hide(); 
     }, function() { 
$j('.wrapper').find('textarea').tinymce().show(); 
    }); 
}); 

Answer 1

funciona bien si repito el guión para cada área de texto por separado, como área de texto: eq (0), área de texto: eq (1), etc. No sé por qué, pero va hacer.

ACTUALIZACIÓN:

La manera que tienen el ejemplo mostrar/ocultar jQuery en el sitio tinymce no funciona realmente. En lugar de simplemente ocultar el editor, realmente necesita descargar y luego volver a cargarlo, de lo contrario, los cambios realizados en el estado "desactivado" no se guardarán cuando se envíe el formulario. Por lo que debe hacer algo como lo siguiente:

$(function() { 
    var id = 'tinytextareaID'; // ID of your textarea (no # symbol) 
     $("a.toggle").toggle(function(){ 
      tinyMCE.execCommand('mceRemoveControl', false, id); 
     }, function() { 
      tinyMCE.execCommand('mceAddControl', false, id); 
    }); 
}); 

Answer 2

En caso de que puede ayudar a nadie, puedo decir que nunca tuve que funcione bien con el ayudante jQuery cuando tuve varias instancias TinyMCE en la misma página. De hecho, no estoy seguro si tiene sentido usar jquery para esto ya que perderías la oportunidad de trabajar en la metodología "init once" que permite el uso de tinymce. Por lo que acabo de escribir un par de funciones para manejar la conmutación:

function showBlogEditor(strItemId){ 
    var theeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element 
    if(theeditor && theteditor.initialized){ 
     //you can do something here if you need 
    }else{ 
     tinyMCE.execCommand('mceAddControl', false, strItemId); 
    } 
} 
function hideBlogEditor(strItemId){ 
    if (tinyMCE.getInstanceById(strItemId)) 
    { 
      tinyMCE.execCommand('mceFocus', false, strItemId); 
      tinyMCE.execCommand('mceRemoveControl', false, strItemId); 
    }   
} 

Además, sólo se dejó de usar el ayudante jQuery para inicializar e inicializado como esto:

/* it is the mode: "none" that matters here. You are initializing the tinymce object without creating a visual manifestation of it. Then the show and hide functions will turn the control on and off */ 
    tinyMCE.init({ 
     theme : "advanced",mode : "exact", 
     mode : "none", 
     plugins : strplgns, 
     theme_advanced_buttons1 : strbtns1, 
     theme_advanced_buttons2 : strbtns2, 
     theme_advanced_buttons3 : strbtns3, 
     content_css : "/css/hlsl.css" 
    });  

Realmente, después de todo el tiempo que perdí tratando de hacer que funcione con jquery, solo uso el objeto tinymce directamente. Como init solo se llama una vez, todos los editores aparecen buscando y trabajando de la misma manera.

Answer 3

Para el que busque TinyMCE versión 4.x puede utilizar:

tinymce.EditorManager.execCommand('mceToggleEditor', true, textarea_id); 

Answer 4

en mis páginas que cambiar entre la vainilla HTML 'textarea' y editor TinyMCE. Yo uso tinymce 4. Las recetas anteriormente ya no funcionan en la versión 4. Con el fin de no perder el contenido de área de texto de presentar en cualquiera de los casos me encontré con esta solución:

<script> 
 
function toggle_tinymce_checkbutton(checkButtonId,strItemId){ 
 
var toggle = $('#'+checkButtonId); // checkButtonId = id of checkbutton w/o # 
 
if(toggle.attr('value') == 'on') { 
 
\t var editor = tinymce.EditorManager.get(strItemId); // strItemId = id of textarea w/o # 
 
\t editor.remove(); 
 
\t toggle.attr('value','off'); 
 
} else { 
 
\t var editor = tinymce.EditorManager.createEditor(strItemId,tinymce_settings); 
 
\t editor.render(); 
 
\t toggle.attr('value','on');} 
 
} 
 
</script>

'tinymce_settings' es este diccionario de redactor opciones:

<script> 
 
tinymce_settings = { 
 
\t selector: '#cm_pages_body', 
 
\t height: 300, 
 
\t width:767, 
 
\t statusbar: false, 
 
\t convert_urls: false, 
 
\t valid_children: '+body[style]', 
 
\t plugins: [ 
 
\t  'advlist autolink lists link image charmap print preview anchor', 
 
\t  'searchreplace visualblocks code fullscreen', 
 
\t  'insertdatetime media table contextmenu paste code', 
 
\t  'textcolor', 
 
\t ], 
 
\t toolbar: 'undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code', 
 
\t content_css: [ 
 
\t  '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
 
\t  '//www.tinymce.com/css/codepen.min.css' 
 
\t ],}; 
 
</script>