Implementación de TinyMCE en Ruby on Rails

TinyMCE es un excelente control de editor Javascript/HTML basado en web, independiente de la plataforma, que es muy útil para aquellos que desean permitir a sus usuarios editar documentos HTML en línea. Está diseñado principalmente para integrarse fácilmente con sistemas de gestión de contenido, incluidos WordPress, Drupal, etc. Es un editor de texto enriquecido que genera HTML, lo que hace que sea realmente fácil agregar contenido enriquecido mediante la aplicación Rails.

TinyMCE tiene la capacidad de convertir campos de área de texto HTML o cualquier otro elemento HTML en instancias de editor. Ofrece varias herramientas de formato HTML para texto, así como para imágenes/vídeos (en términos de alineación). Las configuraciones pueden ocurrir durante la integración con un proyecto, lo que resulta en flexibilidad del proyecto.

Personalizando TinyMce Editor 4, también usando Ruby on Rails:

Agregar botón de menú: 

Copie el contenido completo del paquete de desarrollo TinyMce-4 y téngalo en sus activos o carpeta pública, incluye clases, idiomas, complementos y otros archivos, scripts y todo lo que necesita.

Nombra un botón, aquí lo nombraré R.design, al hacer clic aparece un menú desplegable con un solo elemento llamado "menú1", al hacer clic, el contenido se agrega en el editor, no olvides incluir tinymce.min.js

tinymce.init({ selector: “área de texto”, configuración: función (editor) { editor.addButton('report_design', { escriba: 'botón de menú', texto: 'R.Diseño', icono: falso, menú: [ {texto: 'menú1', al hacer clic: función() {editor.insertContent('menú1');}} ] }); },

complementos: [ “advlist autolink enumera enlace imagen charmap impresión vista previa ancla”, “buscar reemplazar código de bloques visuales en pantalla completa”, “insertar fecha y hora menú contextual de tabla de medios pegar moxiemanager”, “emoticones imprimir color de texto” ], barra de herramientas: “insertar archivo deshacer rehacer | selección de estilo | negrita cursiva | alignleft aligncenter alignright alignjustify | bullist numlist quitar sangría | imagen del enlace | emoticones | color de fondo del primercolor | imprimir | menú “ }); selector: “área de texto”

indica que se colocará el editor para el área de texto del tipo de entrada.

Usando con rieles:

menú: [

<% @matriz.cada uno |valor| %> {texto: '<%= valor %>', al hacer clic: función() {editor.insertContent('<%= valor %>');} <% final %> ]

Reordene los iconos de la barra de herramientas, coloree el texto y el fondo. barra de herramientas: “insertar archivo deshacer rehacer” barra de herramientas: “deshacer insertar archivo rehacer”

Si faltan el ícono de color de texto y el color de fondo, todo lo que necesita es agregar el color de texto a sus complementos;[…] primero, luego use el color de frente y el color de fondo en la barra de herramientas, para que el ícono aparezca en la barra de herramientas del editor.

Todas las cosas que incluya/definiera en la carpeta tinymce/plugins/* se pueden usar en el editor de tinymce. barra de herramientas: “color de fondo del color anterior”

Borde de la mesa para cambiar pañales: 

Archivo: tinymce/skins/lightgray/content.min.css Que tenga estilo aplicado para mesa. borde: 1px discontinuo #BBBBBB; Anule el estilo predeterminado, simple y comparativamente mejor que el predeterminado. .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption { borde: 1px negro sólido; colapso fronterizo: colapso; tamaño de fuente: 14px; }

Elementos del submenú: 

menú: [ { texto:'Elemento de menú', menú:[ {text:'sub1′,value:'val1′},{text:'sub2′,value:'val2′}], onclick: función() {editor.insertContent('<%= “submenú” %>');} } ]

Usando junto con rieles, al hacer clic en un elemento del submenú, inserción del elemento en el espacio del área de texto del editor. menú: [ { texto:'Datos básicos del estudiante', menú:[<% @object.each do |datos| %>{texto:'<%= datos %>', onclick: function() {editor.insertContent('<%= datos %>');}},<% final %>] } ] Administrador de ventanas { texto:'Nombre', al hacer clic: función() { editor.windowManager.open({ título: 'Márgenes del papel', cuerpo: [ {tipo: 'cuadro de texto', nombre: 'primero', etiqueta: 'nombre', valor: "}, {tipo: 'cuadro de texto', nombre: 'apellido', etiqueta: 'apellido', valor:”} ], al enviar: función (e) { // Insertar contenido cuando se envía el formulario de ventana editor.insertContent('Nombre' + e.data.first); editor.insertContent('Apellido' + e.data.last); } }); } } Usando a lo largo de los rieles {texto:'Márgenes', al hacer clic: función() { editor.windowManager.open({ título: 'Márgenes del papel', cuerpo: [ { tipo: 'cuadro de texto', nombre: 'superior', etiqueta: 'Margen superior (cm)', valor: '<%[email protected] si @custom_report.top.presente? %>' } ], al enviar: función (e) {

<%= función_remota( :url => {:controlador=>”controlador”,:acción => “acción”}, :con => “'margin_top=' + e.data.top ”) %>

} }); } }

Habiendo adquirido la destreza para brindar soluciones RoR en todo el mundo en desarrollo, implementación, administración, monitoreo y soporte de sus aplicaciones, RailsCarma le brinda soluciones comerciales eficientes y simplificadas.

Leer más : 

• Una forma sencilla de aumentar el rendimiento de su aplicación Rails

• Los conceptos básicos de la creación y el uso de módulos en Rails

• Marco de tiempo real

• Implementando Tinymce en Ruby on Rails

• ¿Qué es la API REST?

Póngase en contacto con nosotros.