Implementierung von TinyMCE in Ruby on Rails

TinyMCE ist eine hervorragende plattformunabhängige, webbasierte Javascript-/HTML-Editor-Steuerung, die äußerst nützlich für diejenigen ist, die ihren Benutzern die Online-Bearbeitung von HTML-Dokumenten ermöglichen möchten. Es ist hauptsächlich für die einfache Integration in Content-Management-Systeme wie WordPress, Drupal usw. konzipiert. Es handelt sich um einen Rich-Text-Editor, der HTML ausgibt und es so sehr einfach macht, Rich-Content mit der Rails-Anwendung hinzuzufügen.

TinyMCE bietet die Möglichkeit, HTML-Textbereichsfelder oder andere HTML-Elemente in Editorinstanzen zu konvertieren. Es bietet verschiedene HTML-Formatierungstools für Text sowie für Bilder/Videos (in Bezug auf die Ausrichtung). Während der Integration in ein Projekt können Konfigurationen vorgenommen werden, was zu einer Flexibilität des Projekts führt.

Anpassen des TinyMce Editor 4, auch mit Ruby on Rails:

Menüschaltfläche hinzufügen: 

Kopieren Sie den gesamten Inhalt des TinyMce-4-Entwicklungspakets und legen Sie ihn in Ihren Assets oder öffentlichen Ordnern ab. Er enthält die Klassen, Sprachen, Plugins und anderen Dateien von TinyMce, Skripte und alles, was Sie brauchen.

Benennen Sie eine Schaltfläche, hier nenne ich sie R.design. Beim Klicken erscheint ein Dropdown-Menü mit einem einzelnen Element namens „menu1“. Beim Klicken wird der Inhalt im Editor angehängt. Vergessen Sie nicht, tinymce.min.js einzuschließen

tinymce.init({ Selektor: „textarea“, Setup: Funktion(Editor) { editor.addButton('report_design', { Typ: 'Menüschaltfläche', Text: 'R.Design', Symbol: falsch, Speisekarte: [ {text: 'menu1', onclick: function() {editor.insertContent('menu1');}} ] }); },

Plugins: [ „Advlist Autolink listet Link-Bild-Charmap-Druckvorschau-Anker auf“, „searchreplace visualblocks code fullscreen“, „Insertdatetime media table contextmenu paste moxiemanager“, „Emoticons drucken Textfarbe“ ], Symbolleiste: „Datei einfügen, rückgängig machen, wiederholen | Stilauswahl | fett kursiv | alignleft aligncenter alignright alignjustify | Bullist Numlist Outdent Indent | Bild verlinken | Emoticons | Vorderfarbe, Hintergrundfarbe | drucken | Speisekarte " }); Selektor: „textarea“

Gibt an, dass der Editor für den Eingabetyp Textbereich platziert wird.

Verwendung mit Schienen:

Speisekarte: [

<% @array.each tun |value| %> {text: '<%= value %>', onclick: function() {editor.insertContent('<%= value %>');} <% Ende %> ]

Ordnen Sie Symbolleistensymbole, Farbtext und Hintergrund neu an. Symbolleiste: „Datei einfügen, rückgängig machen, wiederholen“ Symbolleiste: „Einfügedatei rückgängig machen, wiederholen“

Wenn das Symbol für die Textfarbe und die Hintergrundfarbe fehlen, müssen Sie lediglich die Textfarbe zu Ihren Plugins hinzufügen;[…] und dann die Vorder- und Hintergrundfarbe in der Symbolleiste verwenden, damit das Symbol in der Editor-Symbolleiste angezeigt wird.

Alle Dinge, die Sie im Ordner tinymce/plugins/* einschließen/definieren, können im Tinymce-Editor verwendet werden. Symbolleiste: „Vorderfarbe, Hintergrundfarbe“

Tischrand ändern: 

Datei: tinymce/skins/lightgray/content.min.css Das hat Stil für die Tabelle angewendet. Rand: 1px gestrichelt #BBBBBB; Überschreiben Sie den Standardstil, einfach und vergleichsweise besser als der Standardstil. .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption { Rand: 1 Pixel einfarbig schwarz; border-collapse: Zusammenbruch; Schriftgröße: 14px; }

Untermenüpunkte: 

Speisekarte: [ { text:'Menüpunkt', Menü:[ {text:'sub1′,Wert:'val1′},{text:'sub2′,Wert:'val2′}], onclick: function() {editor.insertContent('<%= „submenu“ %>');} } ]

Verwendung zusammen mit Schienen, On-Click auf ein Untermenüelement, Einfügen eines Elements in den Textbereich des Editors. Speisekarte: [ { text:'Studentengrunddaten', Menü:[<% @object.each do |data| %>{text:'<%= data %>', onclick: function() {editor.insertContent('<%= data %>');}},<% end %>] } ] Fenstermanager { text:'Name', onclick: function() { editor.windowManager.open({ Titel: „Papierränder“, Körper: [ {type: 'textbox', name: 'first', label: 'first name',value: ”}, {type: 'textbox', name: 'last', label: 'last name', value: ”} ], onsubmit: Funktion(e) { // Inhalt einfügen, wenn das Fensterformular gesendet wird editor.insertContent('Vorname' + e.data.first); editor.insertContent('Nachname' + e.data.last); } }); } } Verwendung entlang von Schienen {text:'Margins', onclick: function() { editor.windowManager.open({ Titel: „Papierränder“, Körper: [ { Typ: 'Textbox', Name: 'oben', Beschriftung: 'Rand oben (cm)', Wert: '<%[email protected] wenn @custom_report.top.present? %>' } ], onsubmit: Funktion(e) {

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

} }); } }

RailsCarma verfügt über umfassende Erfahrung bei der Bereitstellung von RoR-Lösungen in den Bereichen Entwicklung, Bereitstellung, Verwaltung, Überwachung und Unterstützung Ihrer Apps auf der ganzen Welt und bietet Ihnen effiziente und vereinfachte Geschäftslösungen.

Mehr lesen : 

• Eine einfache Möglichkeit, die Leistung Ihrer Rails-App zu steigern

• Die Grundlagen zum Erstellen und Verwenden von Modulen in Rails

• Echtzeit-Framework

• Implementierung von Tinymce in Ruby on Rails

• Was ist eine REST-API?

Nehmen Sie Kontakt mit uns auf.