Implementering av TinyMCE i Ruby on Rails

TinyMCE är en utmärkt plattformsoberoende webbaserad Javascript/HTML-redigeringskontroll, som är mycket användbar för dem som vill tillåta sina användare att redigera HTML-dokument online. Det är huvudsakligen utformat för att enkelt integreras med innehållshanteringssystem, inklusive WordPress, Drupal etc. Det är en rik textredigerare som matar ut HTML, vilket gör det väldigt enkelt att lägga till rikt innehåll med hjälp av rails-applikationen.

TinyMCE har förmågan att konvertera HTML-textfält eller andra HTML-element till editor-instanser. Den erbjuder olika HTML-formateringsverktyg för text såväl som för bilder/videor (när det gäller justering). Konfigurationer kan ske under integrationen med ett projekt vilket resulterar i flexibilitet i projektet.

Anpassa TinyMce Editor 4, även med Ruby on Rails:

Lägga till menyknapp: 

Kopiera hela innehållet från utvecklingspaketet TinyMce-4 och ha det i dina tillgångar eller offentliga mappar, det innehåller tinymces klasser, langs, plugins och andra filer, skript och allt du behöver.

Namnge en knapp, här kommer jag att namnge som R.design, på klick visas rullgardinsmenyn med ett enda objekt som heter "menu1", vid klick, innehållet läggs till i editorn, glöm inte att inkludera tinymce.min.js

tinymce.init({ väljare: "textområde", setup: function(editor) { editor.addButton('report_design', { typ: 'menyknapp', text: 'R.Design', ikon: falskt, meny: [ {text: 'menu1 ', onclick: function() {editor.insertContent('menu1');}} ] }); },

plugins: [ "advlist autolink lists länk bild charmap förhandsgranskning ankare", "sök ersätt visualblocks kod helskärm", "insertdatetime media table context menu paste moxiemanager", "emoticons trycker textfärg" ], verktygsfält: "insertfile ångra göra om | styleselect | fet kursiv | alignleft aligncenter alignright alignjustify | bullist numlist outdent indrag | länkbild | uttryckssymboler | förfärg bakfärg | skriv ut | meny " }); väljare: "textområde"

indikerar att editorn kommer att placeras för textområde av inmatningstyp.

Användning med skenor:

meny: [

<% @array.each do |value| %> {text: '<%= värde %>', onclick: function() {editor.insertContent('<%= värde %>');} <% slut %> ]

Ändra ordning på verktygsfältsikoner, färglägga text och bakgrund. verktygsfält: "infoga fil ångra göra om" verktygsfält: "ångra infoga fil gör om"

Om textfärgikonen och bakgrundsfärgen saknas är allt du behöver lägga till textfärgen i dina plugins;[...] först, använd sedan förfärgen och bakfärgen i verktygsfältet, så att ikonen visas i redigerarens verktygsfält.

Alla saker du inkluderar/definierar i mappen tinymce/plugins/* kan användas i tinymce-redigeraren. verktygsfält: "förfärg bakfärg"

Ändra tabellkant: 

Fil: tinymce/skins/lightgray/content.min.css Det har stil tillämpats för bord. kantlinje: 1px streckad #BBBBBB; Åsidosätt standardstilen, enkel och jämförelsevis bättre än standard. .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption { kant: 1px helt svart; border-collapse: kollapsa; teckensnittsstorlek: 14px; }

Undermenyalternativ: 

meny: [ { text:'Menyobjekt', meny:[ {text:'sub1',value:'val1'},{text:'sub2',value:'val2'}], onclick: function() {editor.insertContent('<%= “undermeny” %>');} } ]

Använd tillsammans med skenor, ett klick på ett undermenyobjekt, infogning av objekt i redaktörens textområde. meny: [ { text:'Student Basic Data', meny:[<% @object.each do |data| %>{text:'<%= data %>', onclick: function() {editor.insertContent('<%= data %>');}},<% end %>] } ] Fönsterhanterare { text:'Namn', onclick: function() { editor.windowManager.open({ titel: 'Pappersmarginaler', kropp: [ {typ: 'textbox', namn: 'first', label: 'first name', value: ”}, {typ: 'textbox', namn: 'last', label: 'efternamn', värde: ”} ], onsubmit: function(e) { // Infoga innehåll när fönsterformuläret skickas editor.insertContent('First Name' + e.data.first); editor.insertContent('Efternamn' + e.data.last); } }); } } Används längs skenor {text:'Margins', onclick: function() { editor.windowManager.open({ titel: 'Pappersmarginaler', kropp: [ { typ: 'textbox', namn: 'top', etikett: 'Margin top (cm)', värde: '<%[email protected] om @custom_report.top.present? %>' } ], onsubmit: function(e) {

<%= remote_function( :url => {:controller=>”controller”,:action => “action”}, :with => “'margin_top=' + e.data.top ” ) %>

} }); } }

Efter att ha vunnit förmågan att tillhandahålla RoR-lösningar över hela världen inom utveckling, driftsättning, hantering, övervakning, stödja dina appar, ger RailsCarma dig effektiva och förenklade affärslösningar.

Läs mer : 

• Ett enkelt sätt att öka prestandan för din Rails-app

• Grunderna för att skapa och använda moduler i Rails

• Realtidsramverk

• Implementering av Tinymce i Ruby on Rails

• Vad är REST API?

Kontakta oss.