TinyMCE - añadiendo un interruptor de activación / desactivación

Question

Estoy usando TinyMCE en las áreas de texto en mi sección de administrador de Magento. Tengo mi editor TinyMCE visible desde el inicio, pero quiero tener la opción de desactivarlo / volverlo a habilitar.

Estoy usando la versión del complemento jQuery, así que agregué un script, que está casi funcionando. Sin embargo, solo afecta a la primera instancia de TinyMCE; si hay alguna otra instancia en la página, no se verán 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é afecta 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 la secuencia de comandos para cada área de texto, como textarea: eq (0), textarea: eq (1) etc. No sé por qué, pero funcionará.

ACTUALIZACIÓN:

La forma en que tienen el ejemplo de mostrar / ocultar jQuery en el sitio de Tinymce en realidad no funciona. En lugar de simplemente ocultar el editor, realmente necesita descargarlo y luego volver a cargarlo, o bien cualquier cambio realizado en el " desactivado " El estado no se guardará cuando se envíe el formulario. Así que deberías 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

Para cualquier persona que busque la versión 4.x de TinyMCE puede usar:

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

Answer 3

En caso de que pueda ayudar a alguien, puedo decir que nunca lo hice funcionando bien con el jquery helper cuando tuve varias instancias de estaño en la misma página. De hecho, no estoy seguro de si tiene sentido usar jquery para esto, ya que perdería la oportunidad de trabajar en el " init once " Metodología que permite Tinymce. Así que acabo de escribir un par de funciones para manejar el cambio:

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, simplemente dejé de usar jquery helper para inicializar e inicializar así:

/* 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 desperdicié intentando que funcionara con jQuery, solo uso el objeto Tinymce directamente. Dado que init solo se llama una vez, todos los editores aparecen buscando y trabajando de la misma manera.

Answer 4

En mis páginas, alterno entre HTML "textarea" de vainilla y editor de tinymce. Utilizo tinymce 4. Las recetas anteriores ya no funcionan en la versión 4. Para no perder el contenido del área de texto al enviar, encontré esta solución:

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

'tinymce_settings' es este diccionario de opciones de edición:

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