TyneMCE

mayid · #1 (**permalink**) 12/04/2010, 13:22

Tengo algunas dudas:

- el "theme" simple o advanced hace a la carga de ficheros livianos / pesados?

Necesito hacer algo así como una wiki, con múltiples editores siempre y cuando se apriete el boton editar. Es decir, originalmente no tengo textareas. Pero lo resolví con un evento click + el metodo .wrap.

- TyniMCE no tenía contemplado esto para hacerlo más facil?

Cita:

links = $("a.edition");
$.each(links,function(){

$(this).click(function(){

div = $(this).closest("div");
div.wrapInner('<textarea cols="70" rows="60"></textarea>');
id = div.attr("id");
initEditor(id);
div.focus();
return false;

});

});

mayid · #2 (**permalink**) 13/04/2010, 08:34

Otra duda es con el compresor. Tengo que usarlo cada vez que se carga la pagina? No puedo usar en sucesivo el archivo resultante de la primera vez?. Es que me parece que voy a tener problemas de escritura en servidor remoto.

juaniquillo · #3 (**permalink**) 13/04/2010, 09:02

No creo que necesitas el $.each. Con el click ya está creando una colección. El theme simple sí ocupa menos espacio, aunque si solo cargas los botones que necesitas tampoco.

De cualquier forma, te aconsejo que uses "tinyMCE.execCommand" para esos casos. Esto convierte un elemento en un editor TinyMCE. Ent u caso sólo necesitas:

Código Javascript:

Ver original$(document).ready(function(){
    $("a.edition").click(function(){
    
        var div = $(this).closest(); 
        var id = div.attr("id"); 
        tinyMCE.execCommand('mceAddControl', false, id); 
        div.focus();
        return false;
    
    });
});

Como ves, aquí le paso el id del div que quieres que sea el editor a la función.

Aquí puedes ver las opciones que tienes disponibles en tinyMCE.execCommand: http://wiki.moxiecode.com/index.php/TinyMCE:Commands

mayid · #4 (**permalink**) 14/04/2010, 08:00

Cita:

No creo que necesitas el $.each. Con el click ya está creando una colección.

Siempre tuve la duda!

Cita:

originalmente no tengo textareas. Pero lo resolví con un evento click + el metodo .wrap.

Cita:

te aconsejo que uses "tinyMCE.execCommand" para esos casos

Con exec.Command no necesito de esto otro? Antes yo llamaba a esta funcion para hacer un editor personalizado, mirá (como la integro ahora?):

Cita:

function editor(id) {

tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "safari,table,save,media",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,removeforma t,|,justifyleft,justifycenter,justifyright,justify full,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,blockquote,|,und o,redo,|,link,unlink,anchor,image,cleanup,help,cod e",
theme_advanced_buttons3 : "tablecontrols,|,|,media,|,print|,save",
theme_advanced_toolbar_location : "top",
editor_selector : id
});

}

Ahora, con execCommand me aparece el editor simple. Y por cierto, no me funciona el div.focus();

Gracias Juaniquillo!

juaniquillo · #5 (**permalink**) 14/04/2010, 09:28

No, no necesitas agregar un textarea ya que el comando convierte el elemento que quieras en un editor. La realidad es que no es necesario que sean textarea para que que sean editores.

El focus no te funciona porque el div ya no existe cuando lo cambias al editor. Puedes usar mceFocus de tinyMCE.execCommand.

Código Javascript:

Ver originaltinyMCE.execCommand('mceFocusl', false, id);

Por eso te deje esta página para que veas lo que hay disponible:

http://wiki.moxiecode.com/index.php/TinyMCE:Commands

No sé como cambiar el theme, pero debe haber una forma.

mayid · #6 (**permalink**) 14/04/2010, 12:24

Gracias.

El theme puede esperar.

Tengo pendiente leer los execCommand (ahora estoy mareado), pero en principio se que son para armar botoneras. No me esperaba que hubiera un focus ahí.

Mi post anterior fue un poco confuso. Mi pregunta mas importante era como conservar mi editor como un editor advanced, pero customizado.

Cita:

Con exec.Command no necesito de esto otro? Antes yo llamaba a esta funcion para hacer un editor personalizado, mirá (como la integro ahora?):

Cita:

function editor(id) {

tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "safari,table,save,media",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,removef orma t,|,justifyleft,justifycenter,justifyright,justify full,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,blockquote,| ,und o,redo,|,link,unlink,anchor,image,cleanup,help,cod e",
theme_advanced_buttons3 : "tablecontrols,|,|,media,|,print|,save",
theme_advanced_toolbar_location : "top",
editor_selector : id
});

}

Ahora, con execCommand me aparece el editor simple.

juaniquillo · #7 (**permalink**) 14/04/2010, 19:37

Ya veo. NO había entendido bien. Puedes quitarles los botones que no necesitas. Estos son los botones:

Código Javascript:

Ver originaltheme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,removef orma t,|,justifyleft,justifycenter,justifyright,justify full,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,blockquote,| ,und o,redo,|,link,unlink,anchor,image,cleanup,help,cod e",
theme_advanced_buttons3 : "tablecontrols,|,|,media,|,print|,save",

Por ejemplo, en la linea uno tienes el boton de bold, italic, underline, etc.. Si por ejemplo no quieres el de bold sólo tienes que quitarlo y ya.

mayid · #8 (**permalink**) 14/04/2010, 20:13

Si, juaniquillo. Eso fue lo que hice. Ese listado es el listado que armé yo.

Lo que digo es que esto:

tinyMCE.execCommand('mceAddControl', false, id);

... me hace un editor simple. Y yo lo que quiero es lo que ya tenía armado.

Pero bueno, solo pregunto porque se que vos tenes experiencia. Y ademas o estoy mareadito y van a pasar unos días hasta que pueda operar razonablemente. :)

juaniquillo · #9 (**permalink**) 14/04/2010, 20:42

Pues la verdad que esa te la debo..

Tendría que investigar algo más sobre eso.

mayid · #10 (**permalink**) 15/04/2010, 12:31

Entonces vuelvo al textarea. Gracias de todas maneras.

mayid · #11 (**permalink**) 19/04/2010, 19:58

Nueva pregunta. Como hago para que el CSS en modo edición sea el mismo CSS que el del resto de la pagina? Hay maneras de apuntar a tinyMCE para que levante el CSS de mi pagina principal? Sería lo ideal. Así tendría un verdadero editor WYSIYWG.

juaniquillo · #12 (**permalink**) 19/04/2010, 21:23

si lo hay. Puedes incluir una hoja css usando 'content_css' en el objeto de propiedades:

Código Javascript:

Ver originalcontent_css : "style1.css"

mayid · #13 (**permalink**) 20/04/2010, 08:13

Muy buen dato Juaniquillo! Yo tengo este listado de referencia, y voy implementando cosas, pero todavía es demasiada información para mis ojos:
http://wiki.moxiecode.com/index.php/...:Configuration

Gracias mil.