¿Varios editores TinyMCE, pero solo una barra de herramientas?

Question

He buscado en el foro, pero no puedo encontrar una respuesta definitiva a este problema ...

Estoy usando jQuery y TinyMCE en nuestro sitio web. He revisado los documentos de TinyMCE, pero aún me estoy perdiendo, me temo. Estamos haciendo una interfaz que requiere edición in situ en varios lugares de la página. Lo único es que cada uno de ellos tendrá todas las opciones de edición de TinyMCE en una barra de herramientas en la parte superior. Entonces, para recapitular, son varios editores (que no tienen barras de herramientas, solo un lugar para editar o seleccionar el texto) y solo una barra de herramientas en la parte superior de la página para controlar el cuadro de texto que esté activo en ese momento.

¿Cómo se pudo lograr esto? ¿Es posible? Cualquier ayuda, cualquier impulso en la dirección correcta, sugerencias/consejos/conocimiento sobre este problema sería una gran ayuda.

Gracias, James

Answer 1

Sé que hay una manera de mostrar la barra de herramientas cuando un área de texto se centra en, y luego ocultar el área de texto borroso caso - por lo que podría ser una ruta.

Hago un tipo similar de cosas (con múltiples áreas de texto) donde cargo el tinyMCE, por lo que algo así como cargar a pedido y luego destruir cuando termine (desenfoque) podría ser lo que buscas.

No puedo darle todo mi código, ya que en realidad es parte de la I.P de mi empleador, pero aquí hay un bosquejo general, con suerte debería ayudar. El tinyMCE_GZ es parte del gzip que está fuera del sitio tinyMCE.

isTinyMCE_Loaded = false; 

jQuery('.my-textarea').one("click", function(){ 
    BuildWYSIWYG.Full(jQuery(this)); 
}) 

BuildWYSIWYG.OnDemand: function(callback){ 
    tinyMCE_GZ.init({ 
     plugins : 'style,table,advhr,advimage,advlink,insertdatetime,preview,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,safari,tinybrowser', 
     themes : 'simple,advanced', 
     languages : 'en', 
     disk_cache : true, 
     debug : false 
    }, function(){ 
     isTinyMCE_Loaded = true; 
     callback(); 
    }); 
}; 
BuildWYSIWYG.Full: function(el){ 
    settings.elements = jQuery(el).attr("id"); 

    // Build advanced wysiwyg 
    if (isTinyMCE_Loaded){ 
     tinyMCE.init(settings); 
    } else { 
     BuildWYSIWYG.OnDemand(function(){ 
      tinyMCE.init(settings); 
     }); 
    } 
} 

Answer 2

Puede haber otra manera. Echale un vistazo a éste ejemplo. http://tinymce.moxiecode.com/examples/example_23.php

Puede usar los enlaces en la parte inferior (Mostrar, Ocultar, Negrita, Obtener Contenido, etc.) como un menú (puede requerir un poco de estilo). Luego, obtenga el ID del área de texto actualmente en foco y páselo al menú (#corriente) y úselo para cambiar ese área de texto.

para lograr lo que usted está describiendo:

1. Primera deshabilitar todos los elementos de menú TinyMCE indivudual.
2. Una vez que están deshabilitadas, crea tu propio menú TinyMCE en HTML y ajústalo como corresponde.
3. Determine qué área de texto TinyMCE en el foco
4. Aplicar las acciones de su nuevo menú a la caja de texto que se centra

Ahora un poco de código (puede requerir un poco de depuración ...)

En primer lugar, Inicializa TinyMCE y deshabilita los menús.

tinyMCE configs 
({ 
    mode : "textareas", 
    theme : "advanced", 
    editor_selector : "editable" 
    theme_advanced_buttons1 : "", 
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    theme_advanced_toolbar_location : "botton", 
    theme_advanced_statusbar_location : "bottom" }); 

creo que también se puede editar la función _addToolbars en tiny_mce/themes/avanzadas/editor_template_src.js y luego las maletas.

a continuación, determinar el área de texto que se encuentra actualmente en el foco usando jQuery aprieto:

$().ready(function() { 
     var current; 
     $('.editable').focus(
      current = this.id; 
     ); 
     $('.editable').blur(
      //maybe hide the menu (?) 
     ); 

} 

continuación, crear el HTML con nuestras áreas de texto y el menú

<form method="post" action="somepage"> 
<div id="independent_menu"> 
    <!-- The Menu, Please Style Accordingly --> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().show();">[Show]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().hide();">[Hide]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('Bold');">[Bold]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').html());">[Get contents]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent());">[Get selected HTML]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getContent({format : 'text'}));">[Get selected text]</a> 
    <a href="javascript:;" onmousedown="alert($('#current').tinymce().selection.getNode().nodeName);">[Get selected element]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a> 
    <a href="javascript:;" onmousedown="$('#current').tinymce().execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a> 
</div> 

<!-- The Text Areas --> 

<textarea class="editable" id="one">Some Text Here</textarea> 

<textarea class="editable" id="two">Yet another text area</textarea> 

<textarea class="editable" id="three">Final Text Area</textarea> 

Answer 3

Lo hice con una versión anterior de tinymce:

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10197 http://examples.dtbaker.com.au/code/tinymce/

no han vuelto a producir esto con la versión más reciente aunque :(

Pero básicamente hay dos maneras de hacerlo, ya sea:

1) Cree su propio menú que invoca los argumentos de tinymce en el editor de tinymce activo.

2) Configure la barra de herramientas de tinymce/menú para que sea externa, de modo que aparezca cuando se enfoca un editor. Luego, usando CSS, coloca cada barra de herramientas para que aparezca en el mismo lugar. Entonces parece que hay una barra de herramientas única, pero de hecho son múltiples barras de herramientas que aparecen en el mismo lugar.

Espero que ayude.

Answer 4

que hice con la versión 3.x como esto (la sintaxis es de Prototipo):

En primer lugar, he creado un envoltorio barra de herramientas (en mi caso me adjunta con la posición: se fija en la parte superior del documento:

<div id="externalToolbarWrapper"></div> 

Entonces puse la función de configuración de los-settings tinymce (para cada editor) como esto:.

[...] 
theme_advanced_toolbar_location : "external", 
setup : function(ed) { 
    ed.onInit.add(function(ed, e) { 
     ed.onPostRender.add(function(ed, cm) { 
      var toolbar = $(ed.id + '_external'); 
      // inserts the external toolbar in the external wrapper 
      $('externalToolbarWrapper').insert(toolbar.hide()); 
     }); 
     ed.onRemove.add(function(ed) { 
      if($(ed.id + '_external')) { 
       // removes external toolbar 
       $(ed.id + '_external').remove(); 
      } 
     }); 
    }); 
} 

esto funcionó en mi caso - el espectáculo editores/ocultar las barras de herramientas en la activación/desactivación

Answer 5

Estoy proporcionando una solución a esta pregunta en caso de que alguien todavía venga aquí por una. Puede usar execCommand para ejecutar varios estilos de texto que desee mientras hace clic en sus botones personalizados. Por ejemplo:

// bold, italic and underline 
$('#bold').click(function(){ 
    tinymce.execCommand('Bold'); 
}); 
$('#italic').click(function(){ 
    tinyMCE.execCommand('Italic'); 
}); 
$('#underline').click(function(){ 
    tinyMCE.execCommand('Underline'); 
}); 

//commands for left align, right align and center align 
$('#l-a').click(function(){ 
    tinyMCE.execCommand('JustifyLeft'); 
}); 
$('#c-a').click(function(){ 
    tinyMCE.execCommand('JustifyCenter'); 
}); 
$('#r-a').click(function(){ 
    tinyMCE.execCommand('JustifyRight'); 
}); 

//commands for inserting ul or ol 
$('#ul').click(function(){ 
    tinyMCE.execCommand('InsertUnorderedList'); 
}); 
$('#ol').click(function(){ 
    tinyMCE.execCommand('InsertOrderedList'); 
}); 

donde #bold, #italic, #ul etc son los identificadores de los elementos HTML que se está utilizando para hacer aplicar el estilo. Por ejemplo:

<button id="bold">B</button> 

Este botón resaltará el texto, sin importar el texto en qué instancia de tinymce. Aunque el único inconveniente de esta funcionalidad es que tendrá que trabajar mucho para mostrar el efecto en un botón determinado cuando está activado o desactivado. Si no estás preocupado con eso, entonces esto hará el truco.

espero que ayude ...