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ú: 

Copy the complete contents from TinyMce-4 development package have it in your assets or public folder, it includes tinymce’s classes, langs, plugins and other files, scripts and everything you need.

Name a button, here I will name as R.design, on click drop down menu with a single item named “menu1” appears, onclick, the content is appended in the editor, don’t forget to include tinymce.min.js

tinymce.init({ selector: “textarea”, configuración: función (editor) { editor.addButton(‘report_design’, { type: ‘menubutton’, text: ‘R.Design’, icono: falso, menú: [ {text: ‘menu1 ‘, onclick: function() {editor.insertContent(‘menu1’);}} ] }); },

complementos: [ “advlist autolink lists link image charmap print preview anchor”, “searchreplace visualblocks code fullscreen”, “insertdatetime media table contextmenu paste moxiemanager”, “emoticons print textcolor” ], toolbar: “insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | emoticons | forecolor backcolor | print | menu “ }); selector: “textarea”

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

Usando con rieles:

menú: [

<% @matriz.cada uno |valor| %> {text: ‘<%= value %>’, onclick: function() {editor.insertContent(‘<%= value %>’);} <% final %> ]

Reordene los iconos de la barra de herramientas, coloree el texto y el fondo. barra de herramientas: “insertfile undo redo” barra de herramientas: “undo insertfile redo”

If the text color icon and background coloring is missing, all you need is to add the textcolor into your plugins;[…] first, then use the forecolor and backcolor in the toolbar, so the icon does appear in the editor toolbar.

All of the things you include/defined in tinymce/plugins/* folder can be used in the tinymce editor. toolbar: “forecolor backcolor”

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ú: [ { text:’Menu item’, menu:[ {text:’sub1′,value:’val1′},{text:’sub2′,value:’val2′}], onclick: function() {editor.insertContent(‘<%= “submenu” %>’);} } ]

Using along with rails, onclick of a submenu item, item insertion into editor’s textarea space. menú: [ { text:’Student Basic Data’, menu:[<% @object.each do |data| %>{text:'<%= data %>’, onclick: function() {editor.insertContent(‘<%= data %>’);}},<% end %>] } ] Administrador de ventanas { text:’Name’, onclick: function() { editor.windowManager.open({ title: ‘Paper Margins’, cuerpo: [ {type: ‘textbox’, name: ‘first’, label: ‘first name’,value: ”}, {type: ‘textbox’, name: ‘last’, label: ‘last name’, value: ”} ], al enviar: función (e) { // Insertar contenido cuando se envía el formulario de ventana editor.insertContent(‘First Name’ + e.data.first); editor.insertContent(‘Last Name’ + e.data.last); } }); } } Usando a lo largo de los rieles {text:’Margins’, onclick: function() { editor.windowManager.open({ title: ‘Paper Margins’, cuerpo: [ { type: ‘textbox’, name: ‘top’, label: ‘Margin top (cm)’, value: ‘<%=@report.top if @custom_report.top.present? %>’ } ], al enviar: función (e) {

<%= función_remota( :url => {:controller=>”controller”,:action => “action”}, :with => “‘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.