Implementazione di TinyMCE in Ruby on Rails

TinyMCE è un eccellente controllo editor Javascript/HTML basato sul Web, indipendente dalla piattaforma, molto utile per coloro che desiderano consentire ai propri utenti di modificare documenti HTML online. È progettato principalmente per integrarsi facilmente con i sistemi di gestione dei contenuti, inclusi WordPress, Drupal ecc. È un editor di testo ricco che genera HTML, rendendo davvero semplice l'aggiunta di contenuti ricchi utilizzando l'applicazione Rails.

TinyMCE ha la capacità di convertire campi dell'area di testo HTML o qualsiasi altro elemento HTML in istanze dell'editor. Offre vari strumenti di formattazione HTML sia per il testo che per immagini/video (in termini di allineamento). Le configurazioni possono avvenire durante l'integrazione con un progetto che si traduce in flessibilità del progetto.

Personalizzazione di TinyMce Editor 4, utilizzando anche con Ruby on Rails:

Aggiunta del pulsante Menu: 

Copia il contenuto completo dal pacchetto di sviluppo TinyMce-4 e inseriscilo nelle tue risorse o nella cartella pubblica, include le classi, i lang, i plugin di TinyMce e altri file, script e tutto ciò di cui hai bisogno.

Assegna un nome a un pulsante, qui lo chiamerò R.design, facendo clic viene visualizzato un menu a discesa con un singolo elemento denominato "menu1", onclick, il contenuto viene aggiunto nell'editor, non dimenticare di includere tinymce.min.js

tinymce.init({ selettore: “area testo”, configurazione: funzione (editor) { editor.addButton('report_design', { digitare: 'pulsante menu', testo: 'R.Design', icona: falso, menù: [ {testo: 'menu1 ', onclick: function() {editor.insertContent('menu1');}} ] }); },

plugin: [ “advlist elenchi di collegamento automatico collegamento immagine charmap anteprima di stampa ancoraggio”, “cerca sostituisci codice visualblocks a schermo intero”, “inserisci data/ora tabella multimediale menu contestuale incolla moxiemanager”, “emoticon stampa testocolore” ], barra degli strumenti: “inserisci file annulla ripeti | stileseleziona | grassetto corsivo | allineasinistra allineacentro allineadestra allineagiustifica | bullist numlist outdent indent | collegamento immagine | emoticon | primo piano e sfondo | stampa | menù " }); selettore: “textarea”

indica che l'editor verrà posizionato per il tipo di input textarea.

Utilizzo con binari:

menù: [

<% @array.each fa |value| %> {testo: '<%= valore %>', onclick: function() {editor.insertContent('<%= valore %>');} <% fine %> ]

Riordina le icone della barra degli strumenti, colora il testo e lo sfondo. barra degli strumenti: “inserisci file annulla ripeti” barra degli strumenti: “Annulla ripristino insertfile”

Se mancano l'icona del colore del testo e la colorazione dello sfondo, tutto ciò che serve è aggiungere prima il colore del testo nei plugin;[…], quindi utilizzare il colore di primo piano e di sfondo nella barra degli strumenti, in modo che l'icona appaia nella barra degli strumenti dell'editor.

Tutte le cose che includi/definisci nella cartella tinymce/plugins/* possono essere utilizzate nell'editor tinymce. barra degli strumenti: “backcolor primo piano”

Bordo fasciatoio: 

File: tinymce/skins/lightgray/content.min.css Questo ha stile applicato al tavolo. bordo: 1px tratteggiato #BBBBBBB; Sostituisci lo stile predefinito, semplice e comparativamente migliore di quello predefinito. .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption { bordo: 1px nero pieno; collasso del confine: collasso; dimensione carattere: 14px; }

Voci del sottomenu: 

menù: [ { testo:'Voce di menu', menu:[ {testo:'sub1′,valore:'val1′},{testo:'sub2′,valore:'val2′}], onclick: function() {editor.insertContent('<%= “sottomenu” %>');} } ]

Utilizzo insieme ai binari, al clic di una voce di sottomenu, inserimento dell'elemento nello spazio dell'area di testo dell'editor. menù: [ { text:'Dati di base dello studente', menu:[<% @object.each do |data| %>{testo:'<%= dati %>', onclick: function() {editor.insertContent('<%= data %>');}},<% end %>] } ] Gestore delle finestre { testo:'Nome', onclick: funzione() { editor.windowManager.open({ titolo: 'Margini della carta', corpo: [ {tipo: 'casella di testo', nome: 'nome', etichetta: 'nome', valore: ”}, {tipo: 'casella di testo', nome: 'cognome', etichetta: 'cognome', valore: ”} ], onsubmit: funzione(e) { // Inserisce il contenuto quando viene inviato il modulo della finestra editor.insertContent('Nome' + e.data.first); editor.insertContent('Cognome' + e.data.last); } }); } } Utilizzo lungo i binari {testo:'Margini', onclick: funzione() { editor.windowManager.open({ titolo: 'Margini della carta', corpo: [ { tipo: 'casella di testo', nome: 'superiore', etichetta: 'Margine superiore (cm)', valore: '<%[email protected] se @custom_report.top.present? %>' } ], onsubmit: funzione(e) {

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

} }); } }

Avendo acquisito l'abilità nel fornire soluzioni RoR in tutto il mondo nello sviluppo, implementazione, gestione, monitoraggio e supporto delle tue app, RailsCarma ti offre soluzioni aziendali efficienti e semplificate.

Per saperne di più : 

• Un modo semplice per aumentare le prestazioni della tua app Rails

• Le basi della creazione e dell'utilizzo dei moduli in Rails

• Quadro in tempo reale

• Implementazione di Tinymce in Ruby on Rails

• Cos'è l'API REST?

Mettiti in contatto con noi.