{"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":"implementierung-von-tinymce-in-ruby-auf-schienen","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/de\/blog\/fachartikel\/implementierung-von-tinymce-in-ruby-auf-schienen\/","title":{"rendered":"Implementierung von 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> ist eine hervorragende plattformunabh\u00e4ngige, webbasierte Javascript-\/HTML-Editor-Steuerung, die \u00e4u\u00dferst n\u00fctzlich f\u00fcr diejenigen ist, die ihren Benutzern die Online-Bearbeitung von HTML-Dokumenten erm\u00f6glichen m\u00f6chten. Es ist haupts\u00e4chlich f\u00fcr 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\u00fcgen.\n

TinyMCE bietet die M\u00f6glichkeit, HTML-Textbereichsfelder oder andere HTML-Elemente in Editorinstanzen zu konvertieren. Es bietet verschiedene HTML-Formatierungstools f\u00fcr Text sowie f\u00fcr Bilder\/Videos (in Bezug auf die Ausrichtung). W\u00e4hrend der Integration in ein Projekt k\u00f6nnen Konfigurationen vorgenommen werden, was zu einer Flexibilit\u00e4t des Projekts f\u00fchrt.<\/p>\n\n

Anpassen des TinyMce Editor 4, auch mit Ruby on Rails:<\/h4>\n

<\/h5>\n
Men\u00fcschaltfl\u00e4che hinzuf\u00fcgen:\u00a0<\/span><\/strong><\/h5>\n

Kopieren Sie den gesamten Inhalt des TinyMce-4-Entwicklungspakets und legen Sie ihn in Ihren Assets oder \u00f6ffentlichen Ordnern ab. Er enth\u00e4lt die Klassen, Sprachen, Plugins und anderen Dateien von TinyMce, Skripte und alles, was Sie brauchen.<\/p>\n

Benennen Sie eine Schaltfl\u00e4che, hier nenne ich sie R.design. Beim Klicken erscheint ein Dropdown-Men\u00fc mit einem einzelnen Element namens \u201emenu1\u201c. Beim Klicken wird der Inhalt im Editor angeh\u00e4ngt. Vergessen Sie nicht, tinymce.min.js einzuschlie\u00dfen<\/p>\n\n

\n

tinymce.init({<\/em>\n Selektor: \u201etextarea\u201c,<\/em>\n Setup: Funktion(Editor) {<\/em>\n editor.addButton('report_design', {<\/em>\n Typ: 'Men\u00fcschaltfl\u00e4che',<\/em>\n Text: 'R.Design',<\/em>\n Symbol: falsch,<\/em>\n Speisekarte: [<\/em>\n {text: 'menu1', onclick: function() {editor.insertContent('menu1');}}<\/em>\n ]<\/em>\n });<\/em>\n },<\/em><\/p>\n

Plugins: [<\/em>\n \u201eAdvlist Autolink listet Link-Bild-Charmap-Druckvorschau-Anker auf\u201c,<\/em>\n \u201esearchreplace visualblocks code fullscreen\u201c,<\/em>\n \u201eInsertdatetime media table contextmenu paste moxiemanager\u201c,<\/em>\n \u201eEmoticons drucken Textfarbe\u201c<\/em>\n ],<\/em>\n Symbolleiste: \u201eDatei einf\u00fcgen, r\u00fcckg\u00e4ngig machen, wiederholen | Stilauswahl | fett kursiv | alignleft aligncenter alignright alignjustify | Bullist Numlist Outdent Indent | Bild verlinken | Emoticons | Vorderfarbe, Hintergrundfarbe | drucken | Speisekarte "<\/em>\n });<\/em>\n Selektor: \u201etextarea\u201c<\/em><\/p>\n<\/blockquote>\n

Gibt an, dass der Editor f\u00fcr den Eingabetyp Textbereich platziert wird.<\/p>\n\n

Verwendung mit Schienen:<\/span><\/strong><\/h5>\n
\n

Speisekarte: [<\/em><\/p>\n\n

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

Ordnen Sie Symbolleistensymbole, Farbtext und Hintergrund neu an. Symbolleiste: \u201eDatei einf\u00fcgen, r\u00fcckg\u00e4ngig machen, wiederholen\u201c<\/em>\nSymbolleiste: \u201eEinf\u00fcgedatei r\u00fcckg\u00e4ngig machen, wiederholen\u201c<\/em><\/p>\n

Wenn das Symbol f\u00fcr die Textfarbe und die Hintergrundfarbe fehlen, m\u00fcssen Sie lediglich die Textfarbe zu Ihren Plugins hinzuf\u00fcgen;[\u2026] und dann die Vorder- und Hintergrundfarbe in der Symbolleiste verwenden, damit das Symbol in der Editor-Symbolleiste angezeigt wird.<\/p>\n

Alle Dinge, die Sie im Ordner tinymce\/plugins\/* einschlie\u00dfen\/definieren, k\u00f6nnen im Tinymce-Editor verwendet werden. Symbolleiste: \u201eVorderfarbe, Hintergrundfarbe\u201c<\/p>\n\n

Tischrand \u00e4ndern:\u00a0<\/span><\/strong><\/h5>\n
\n

Datei: tinymce\/skins\/lightgray\/content.min.css<\/em>\n Das hat Stil f\u00fcr die Tabelle angewendet.<\/em>\n Rand: 1px gestrichelt #BBBBBB;<\/em>\n \u00dcberschreiben Sie den Standardstil, einfach und vergleichsweise besser als der Standardstil.<\/em>\n .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption {<\/em>\n Rand: 1 Pixel einfarbig schwarz;<\/em>\n border-collapse: Zusammenbruch;<\/em>\n Schriftgr\u00f6\u00dfe: 14px;<\/em>\n }<\/em><\/p>\n

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

Untermen\u00fcpunkte:\u00a0<\/span><\/strong><\/h5>\n
\n

Speisekarte: [<\/em>\n {<\/em>\n text:'Men\u00fcpunkt', Men\u00fc:[ {text:'sub1\u2032,Wert:'val1\u2032},{text:'sub2\u2032,Wert:'val2\u2032}],<\/em>\n onclick: function() {editor.insertContent('<%= \u201esubmenu\u201c %>');}<\/em>\n }<\/em>\n ]<\/em><\/p>\n

Verwendung zusammen mit Schienen, On-Click auf ein Untermen\u00fcelement, Einf\u00fcgen eines Elements in den Textbereich des Editors.<\/em>\n Speisekarte: [<\/em>\n {<\/em>\n text:'Studentengrunddaten', Men\u00fc:[<% @object.each do |data| %>{text:'<%= data %>',<\/em>\n onclick: function() {editor.insertContent('<%= data %>');}},<% end %>]<\/em>\n }<\/em>\n ]<\/em>\n Fenstermanager<\/em>\n {<\/em>\n text:'Name', onclick: function()<\/em>\n {<\/em>\n editor.windowManager.open({<\/em>\n Titel: \u201ePapierr\u00e4nder\u201c,<\/em>\n K\u00f6rper: [<\/em>\n {type: 'textbox', name: 'first', label: 'first name',value: \u201d},<\/em>\n {type: 'textbox', name: 'last', label: 'last name', value: \u201d}<\/em>\n ],<\/em>\n onsubmit: Funktion(e) {<\/em>\n \/\/ Inhalt einf\u00fcgen, wenn das Fensterformular gesendet wird<\/em>\n editor.insertContent('Vorname' + e.data.first);<\/em>\n editor.insertContent('Nachname' + e.data.last);<\/em>\n }<\/em>\n });<\/em>\n }<\/em>\n }<\/em>\n Verwendung entlang von Schienen<\/em>\n {text:'Margins', onclick: function()<\/em>\n {<\/em>\n editor.windowManager.open({<\/em>\n Titel: \u201ePapierr\u00e4nder\u201c,<\/em>\n K\u00f6rper: [<\/em>\n {<\/em>\n Typ: 'Textbox', Name: 'oben', Beschriftung: 'Rand oben (cm)',<\/em>\n Wert: '<%=@report.top wenn @custom_report.top.present? %>'<\/em>\n }<\/em>\n ],<\/em>\n onsubmit: Funktion(e) {<\/em><\/p>\n

<%= remote_function(<\/em>\n :url => {:controller=>\u201ccontroller\u201c,:action => \u201eaction\u201c},<\/em>\n :with => \u201e'margin_top=' + e.data.top \u201d )<\/em>\n %><\/em><\/p>\n

}<\/em>\n });<\/em>\n }<\/em>\n }<\/em><\/p>\n

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

RailsCarma verf\u00fcgt \u00fcber umfassende Erfahrung bei der Bereitstellung von RoR-L\u00f6sungen in den Bereichen Entwicklung, Bereitstellung, Verwaltung, \u00dcberwachung und Unterst\u00fctzung Ihrer Apps auf der ganzen Welt und bietet Ihnen effiziente und vereinfachte Gesch\u00e4ftsl\u00f6sungen.<\/p>\n

Mehr lesen :\u00a0<\/em><\/p>\n\n