{"id":6514,"date":"2015-07-13T03:18:44","date_gmt":"2015-07-13T03:18:44","guid":{"rendered":"https:\/\/dev.railscarma.com\/implementing-tinymce-in-ruby-on-rails\/"},"modified":"2021-06-06T14:46:45","modified_gmt":"2021-06-06T14:46:45","slug":"implementando-tinymce-en-ruby-on-rails","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/es\/blog\/articulos-tecnicos\/implementando-tinymce-en-ruby-on-rails\/","title":{"rendered":"Implementaci\u00f3n de TinyMCE en Ruby on Rails"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tTinyMCE<\/strong> es un excelente control de editor Javascript\/HTML basado en web, independiente de la plataforma, que es muy \u00fatil para aquellos que desean permitir a sus usuarios editar documentos HTML en l\u00ednea. Est\u00e1 dise\u00f1ado principalmente para integrarse f\u00e1cilmente con sistemas de gesti\u00f3n de contenido, incluidos WordPress, Drupal, etc. Es un editor de texto enriquecido que genera HTML, lo que hace que sea realmente f\u00e1cil agregar contenido enriquecido mediante la aplicaci\u00f3n Rails.\n

TinyMCE tiene la capacidad de convertir campos de \u00e1rea de texto HTML o cualquier otro elemento HTML en instancias de editor. Ofrece varias herramientas de formato HTML para texto, as\u00ed como para im\u00e1genes\/v\u00eddeos (en t\u00e9rminos de alineaci\u00f3n). Las configuraciones pueden ocurrir durante la integraci\u00f3n con un proyecto, lo que resulta en flexibilidad del proyecto.<\/p>\n\n

Personalizando TinyMce Editor 4, tambi\u00e9n usando Ruby on Rails:<\/h4>\n

<\/h5>\n
Agregar bot\u00f3n de men\u00fa:\u00a0<\/span><\/strong><\/h5>\n

Copie el contenido completo del paquete de desarrollo TinyMce-4 y t\u00e9ngalo en sus activos o carpeta p\u00fablica, incluye clases, idiomas, complementos y otros archivos, scripts y todo lo que necesita.<\/p>\n

Nombra un bot\u00f3n, aqu\u00ed lo nombrar\u00e9 R.design, al hacer clic aparece un men\u00fa desplegable con un solo elemento llamado "men\u00fa1", al hacer clic, el contenido se agrega en el editor, no olvides incluir tinymce.min.js<\/p>\n\n

\n

tinymce.init({<\/em>\n selector: \u201c\u00e1rea de texto\u201d,<\/em>\n configuraci\u00f3n: funci\u00f3n (editor) {<\/em>\n editor.addButton('report_design', {<\/em>\n escriba: 'bot\u00f3n de men\u00fa',<\/em>\n texto: 'R.Dise\u00f1o',<\/em>\n icono: falso,<\/em>\n men\u00fa: [<\/em>\n {texto: 'men\u00fa1', al hacer clic: funci\u00f3n() {editor.insertContent('men\u00fa1');}}<\/em>\n ]<\/em>\n });<\/em>\n },<\/em><\/p>\n

complementos: [<\/em>\n \u201cadvlist autolink enumera enlace imagen charmap impresi\u00f3n vista previa ancla\u201d,<\/em>\n \u201cbuscar reemplazar c\u00f3digo de bloques visuales en pantalla completa\u201d,<\/em>\n \u201cinsertar fecha y hora men\u00fa contextual de tabla de medios pegar moxiemanager\u201d,<\/em>\n \u201cemoticones imprimir color de texto\u201d<\/em>\n ],<\/em>\n barra de herramientas: \u201cinsertar archivo deshacer rehacer | selecci\u00f3n de estilo | negrita cursiva | alignleft aligncenter alignright alignjustify | bullist numlist quitar sangr\u00eda | imagen del enlace | emoticones | color de fondo del primercolor | imprimir | men\u00fa \u201c<\/em>\n });<\/em>\n selector: \u201c\u00e1rea de texto\u201d<\/em><\/p>\n<\/blockquote>\n

indica que se colocar\u00e1 el editor para el \u00e1rea de texto del tipo de entrada.<\/p>\n\n

Usando con rieles:<\/span><\/strong><\/h5>\n
\n

men\u00fa: [<\/em><\/p>\n\n

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

Reordene los iconos de la barra de herramientas, coloree el texto y el fondo. barra de herramientas: \u201cinsertar archivo deshacer rehacer\u201d<\/em>\nbarra de herramientas: \u201cdeshacer insertar archivo rehacer\u201d<\/em><\/p>\n

Si faltan el \u00edcono de color de texto y el color de fondo, todo lo que necesita es agregar el color de texto a sus complementos;[\u2026] primero, luego use el color de frente y el color de fondo en la barra de herramientas, para que el \u00edcono aparezca en la barra de herramientas del editor.<\/p>\n

Todas las cosas que incluya\/definiera en la carpeta tinymce\/plugins\/* se pueden usar en el editor de tinymce. barra de herramientas: \u201ccolor de fondo del color anterior\u201d<\/p>\n\n

Borde de la mesa para cambiar pa\u00f1ales:\u00a0<\/span><\/strong><\/h5>\n
\n

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

<\/p>\n<\/blockquote>\n

Elementos del submen\u00fa:\u00a0<\/span><\/strong><\/h5>\n
\n

men\u00fa: [<\/em>\n {<\/em>\n texto:'Elemento de men\u00fa', men\u00fa:[ {text:'sub1\u2032,value:'val1\u2032},{text:'sub2\u2032,value:'val2\u2032}],<\/em>\n onclick: funci\u00f3n() {editor.insertContent('<%= \u201csubmen\u00fa\u201d %>');}<\/em>\n }<\/em>\n ]<\/em><\/p>\n

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

<%= funci\u00f3n_remota(<\/em>\n :url => {:controlador=>\u201dcontrolador\u201d,:acci\u00f3n => \u201cacci\u00f3n\u201d},<\/em>\n :con => \u201c'margin_top=' + e.data.top \u201d)<\/em>\n %><\/em><\/p>\n

}<\/em>\n });<\/em>\n }<\/em>\n }<\/em><\/p>\n

<\/p>\n<\/blockquote>\n

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

Leer m\u00e1s :\u00a0<\/em><\/p>\n\n