Forum: Rails-ES Editor de textos para Rails

Hola, hemos pensado en usar un editor de textos mejorado para insertar
mensajes en los foros, ya sabéis lo típico: permitir negritas, modificar
estilos de fuente, etc. Nos hemos fijado en el TinyMCE, un editor HTML
de código abierto que funciona plenamente en Javascript. Aquí esta el
enlace por si a alguien le interesa: http://tinymce.moxiecode.com/

Comento un poco el proceso que hemos seguido:
Instalación-->script/plugin install git://github.com/kete/tiny_mce.git
Copiar archivos javascript--> rake tiny_mce:install
Copiar también el módulo de javascripts en Español -->
http://tinymce.moxiecode.com/download_i18n.php
Copiar uno a uno los archivos en español, dentro del
public/javascripts/tiny_mce

Digamos que hasta aqui puede darse por finalizado la parte de la
instalación.

Nos centramos ahora en la implementación:
Añadir tiny_mce a la plantilla de la aplicación:
<%= include_tiny_mce_if_needed %>

Meterlo en el controller:
uses_tiny_mce(:options => {:theme => 'advanced',
    :browsers => %w{msie gecko},
    :theme_advanced_toolbar_location => "top",
    :theme_advanced_toolbar_align => "left",
    :theme_advanced_resizing => true,
    :theme_advanced_resize_horizontal => false,
    :paste_auto_cleanup_on_paste => true,
    :theme_advanced_buttons1 => %w{formatselect bold italic underline
strikethrough blockquote image separator separator fullscreen code},
    :theme_advanced_buttons2 => [],
    :theme_advanced_buttons3 => [],
    :relative_urls => false,
    :remove_script_host => false,
    :language => :es,
    :plugins => %w{contextmenu paste searchreplace fullscreen}},
    :only => [:new, :create, :edit, :update])


Meterlo en la vista:
  :tipo => 'area', :class => 'mceEditor'
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

A partir de aquí ya podemos usar este editor.


El problema que tenemos es que en el foro tenemos implementado la
función de responder a un tema mediante Ajax y en estos casos el
mceEditor no se carga.

Os pongo como lo tenemos implementado en este caso:

En la vista enlazamos mediante Ajax  al controlador especifico:
link_to_remote("Contestar", {:url => ruta_resp, :method => :get}, :href
=> ruta_resp)

En el controlador respondemos a la llamada de Ajax:

format.js do
          render :update do |page|
            page.replace_html "enlaces_#{@original.id}", ""
            if @yo.estado_id == Usuario::ESTADO_SIN_ACTIVAR
              #en caso de que el usuario no haga click en el correo que
se le envia no podra responder
              page.replace_html "reply_to_#{@original.id}", :partial =>
"contenidos/no_has_validado_usr"
            else
              page.replace_html "reply_to_#{@original.id}", :partial =>
"respuestas/new", :locals => { :respuesta => @respuesta }
            end
          end

Donde respuestas/new es algo tal que así:

<%= campo f, "texto_completo", :tipo => "area", :rows => 8, :cols => 79,
:class => 'mceEditor', :label_pos => "arriba" %>

Pues bien en este caso no se muestra el TinyMCE solamente aparece un
recuadro de texto vacío sin ningún tipo de opción para editar.

Si alguien ha utilizado este mismo editor y se ha visto en el mismo
dilema le agradecería cualquier ayuda. Por otra parte si existe algún
otro editor que funcione perfectamente en Rails y no introduzca este
tipo de problemas os agradeceria mucho que me aportarais algo de
información para poder migrar.

Un saludo y gracias a to2.

Por lo que cuentas, y desconociendo el plugin de tinymce para rails,
diría que el JS se carga una vez se ha terminado de generar el dom
para la página. Si no le fuerzas a que se recargue, cuando se inserte
nuevo html en la página de forma dinámica, no hay nada que convierta
ese text_area en un editor con tinymce.

Si buscas en google dynamic tinymce load y haces clic en el primer
resultado, hablan del tema:

http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=14101

On Martes, 23 de Junio de 2009 13:49:47 Jose vicente Ribera pellicer 
escribió:
> En el controlador respondemos a la llamada de Ajax:
>               page.replace_html "reply_to_#{@original.id}", :partial =>
> Pues bien en este caso no se muestra el TinyMCE solamente aparece un
> recuadro de texto vacío sin ningún tipo de opción para editar.

Cuando añades campos por javascript tienes que activar TinyMCE en los 
campos
que quieras manualmente, porque ya se ha ejecutado la inicializacion de
TinyMCE.

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

Además cuando eliminas campos donde habías activado el TinyMCE, lo que 
ocurre
cuando reemplazas un elemento que contiene un textarea con TinyMCE, 
antes de
eso tienes que eliminar el tinyMCE. Puedes buscar los textareas que 
tengan la
clase mceEditor dentro del elemento que vas a eliminar o reemplazar, y
eliminar tinyMCE de cada uno de ellos:

$('id_elemento').select('textarea.mceEditor').each(function(elem) {
  tinyMCE.execCommand('mceRemoveControl', false, elem.id);
});

--
Sergio Cambra .:: entreCables S.L. ::.
Mariana Pineda 23, 50.018 Zaragoza
T) 902 021 404 F) 976 52 98 07 E) sergio@entrecables.com

Muchas gracias por las respuestas!!. Me pongo a mirarlo ahora mismo!!

> 
> Cuando añades campos por javascript tienes que activar TinyMCE en los 
> campos
> que quieras manualmente, porque ya se ha ejecutado la inicializacion de
> TinyMCE.
> 
> tinyMCE.execCommand('mceAddControl', false, 'id_elemento');
> 


Ok, pero no veo como lo puedo incluir. Se supone que lo tengo que caragr 
cuando hago el page replace: ¿Como le meto el codigo?. El poco 
javascript que he incorporado a mis aplicaciones simepre lo he hecho en 
el onclick y aqui no lo veo nada claro, tengo claro que el id_elemento 
será el del div que quiero que muestre, vamos que basicamente se le esta 
diciendo..el div que vas a mostrar va a ser mce, pero no se como 
incorporarlo aqui :(

page.replace_html "reply_to_#{@original.id}", :partial =>
"respuestas/new", :locals => { :respuesta => @respuesta }

Quizá te sirva de ayuda el siguiente método, para añadir "a mano" el
código javascript que necesitas:

http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods/%3C%3C

On Jun 23, 2009, at 5:22 PM, Jose vicente Ribera pellicer wrote:

>
> incorporarlo aqui :(
>
> page.replace_html "reply_to_#{@original.id}", :partial =>
> "respuestas/new", :locals => { :respuesta => @respuesta }
> -- 
> Posted via http://www.ruby-forum.com/.
> _______________________________________________
> Ror-es mailing list
> Ror-es@lists.simplelogica.net
> http://lists.simplelogica.net/mailman/listinfo/ror-es


--
Alvaro Bautista Pino
alvarobp@gmail.com
http://blog.inbatu.com

Alvaro Bautista wrote:
> Quiz� te sirva de ayuda el siguiente m�todo, para a�adir "a mano" el
> c�digo javascript que necesitas:
> 
> http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods/%3C%3C
> 
> On Jun 23, 2009, at 5:22 PM, Jose vicente Ribera pellicer wrote:
> 

Gracias por el enlace!! , tan pronto como pueda lo pruebo y ya cuento 
como nos fue.

Salu2

Funciona perfectamente!!!

Lo poco que habia que modificar se debe retocar en el controlador. 
Finalmente es así como queda:

format.js do

 render :update do |page|
            page.replace_html "enlaces_#{@original.id}", ""
            if @yo.estado_id == Usuario::ESTADO_SIN_ACTIVAR
              #en caso de que el usuario no haga click en el correo que 
se le envia no podra responder
              page.replace_html "reply_to_#{@original.id}", :partial => 
"contenidos/no_has_validado_usr"
            else
              page.replace_html "reply_to_#{@original.id}", :partial => 
"respuestas/new", :locals => { :respuesta => @respuesta}
              page << "tinyMCE.execCommand('mceAddControl', false, 
'reply_to_#{@original.id}');"
            end
          end
        end


Como veis la línea de códiga que se ha añadido es:
 page << "tinyMCE.execCommand('mceAddControl', false, 
'reply_to_#{@original.id}');"

Donde reply_to_#{@original.id}' es el id del elemento que cambio y que 
quieroque tenga las propiedades de tinyMCE.


Un saludo y como siempre...gracias!!!