Editor de textos para Rails

[chimorito]

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 →

The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE

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.

[chimorito]

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:

The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE

[chimorito]

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) [email protected]

[chimorito]

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

[chimorito]

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 }

[chimorito]

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/<<

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
[email protected]
http://lists.simplelogica.net/mailman/listinfo/ror-es

–
Alvaro B. Pino
[email protected]
http://blog.inbatu.com

[chimorito]

Alvaro B. wrote:

Quiz� te sirva de ayuda el siguiente m�todo, para a�adir “a mano” el
c�digo javascript que necesitas:

<< (ActionView::Helpers::PrototypeHelper::JavaScriptGenerator::GeneratorMethods) - APIdock

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

[chimorito]

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!!!