{"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-in-ruby-on-rails","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/it\/blog\/articoli-tecnici\/implementando-tinymce-in-ruby-on-rails\/","title":{"rendered":"Implementazione di TinyMCE in 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> \u00e8 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. \u00c8 progettato principalmente per integrarsi facilmente con i sistemi di gestione dei contenuti, inclusi WordPress, Drupal ecc. \u00c8 un editor di testo ricco che genera HTML, rendendo davvero semplice l'aggiunta di contenuti ricchi utilizzando l'applicazione Rails.\n

TinyMCE ha la capacit\u00e0 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\u00e0 del progetto.<\/p>\n\n

Personalizzazione di TinyMce Editor 4, utilizzando anche con Ruby on Rails:<\/h4>\n

<\/h5>\n
Aggiunta del pulsante Menu:\u00a0<\/span><\/strong><\/h5>\n

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\u00f2 di cui hai bisogno.<\/p>\n

Assegna un nome a un pulsante, qui lo chiamer\u00f2 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<\/p>\n\n

\n

tinymce.init({<\/em>\n selettore: \u201carea testo\u201d,<\/em>\n configurazione: funzione (editor) {<\/em>\n editor.addButton('report_design', {<\/em>\n digitare: 'pulsante menu',<\/em>\n testo: 'R.Design',<\/em>\n icona: falso,<\/em>\n men\u00f9: [<\/em>\n {testo: 'menu1 ', onclick: function() {editor.insertContent('menu1');}}<\/em>\n ]<\/em>\n });<\/em>\n },<\/em><\/p>\n

plugin: [<\/em>\n \u201cadvlist elenchi di collegamento automatico collegamento immagine charmap anteprima di stampa ancoraggio\u201d,<\/em>\n \u201ccerca sostituisci codice visualblocks a schermo intero\u201d,<\/em>\n \u201cinserisci data\/ora tabella multimediale menu contestuale incolla moxiemanager\u201d,<\/em>\n \u201cemoticon stampa testocolore\u201d<\/em>\n ],<\/em>\n barra degli strumenti: \u201cinserisci file annulla ripeti | stileseleziona | grassetto corsivo | allineasinistra allineacentro allineadestra allineagiustifica | bullist numlist outdent indent | collegamento immagine | emoticon | primo piano e sfondo | stampa | men\u00f9 "<\/em>\n });<\/em>\n selettore: \u201ctextarea\u201d<\/em><\/p>\n<\/blockquote>\n

indica che l'editor verr\u00e0 posizionato per il tipo di input textarea.<\/p>\n\n

Utilizzo con binari:<\/span><\/strong><\/h5>\n
\n

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

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

Riordina le icone della barra degli strumenti, colora il testo e lo sfondo. barra degli strumenti: \u201cinserisci file annulla ripeti\u201d<\/em>\nbarra degli strumenti: \u201cAnnulla ripristino insertfile\u201d<\/em><\/p>\n

Se mancano l'icona del colore del testo e la colorazione dello sfondo, tutto ci\u00f2 che serve \u00e8 aggiungere prima il colore del testo nei plugin;[\u2026], 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.<\/p>\n

Tutte le cose che includi\/definisci nella cartella tinymce\/plugins\/* possono essere utilizzate nell'editor tinymce. barra degli strumenti: \u201cbackcolor primo piano\u201d<\/p>\n\n

Bordo fasciatoio:\u00a0<\/span><\/strong><\/h5>\n
\n

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

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

Voci del sottomenu:\u00a0<\/span><\/strong><\/h5>\n
\n

men\u00f9: [<\/em>\n {<\/em>\n testo:'Voce di menu', menu:[ {testo:'sub1\u2032,valore:'val1\u2032},{testo:'sub2\u2032,valore:'val2\u2032}],<\/em>\n onclick: function() {editor.insertContent('<%= \u201csottomenu\u201d %>');}<\/em>\n }<\/em>\n ]<\/em><\/p>\n

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

<%= funzione_remota(<\/em>\n :url => {:controller=>\u201dcontroller\u201d,:action => \u201cazione\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

Avendo acquisito l'abilit\u00e0 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.<\/p>\n

Per saperne di pi\u00f9 :\u00a0<\/em><\/p>\n\n