{"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":"implementera-tinymce-i-ruby-on-rails","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/sv\/blogg\/tekniska-artiklar\/implementera-tinymce-i-ruby-on-rails\/","title":{"rendered":"Implementering av TinyMCE i 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> \u00e4r en utm\u00e4rkt plattformsoberoende webbaserad Javascript\/HTML-redigeringskontroll, som \u00e4r mycket anv\u00e4ndbar f\u00f6r dem som vill till\u00e5ta sina anv\u00e4ndare att redigera HTML-dokument online. Det \u00e4r huvudsakligen utformat f\u00f6r att enkelt integreras med inneh\u00e5llshanteringssystem, inklusive WordPress, Drupal etc. Det \u00e4r en rik textredigerare som matar ut HTML, vilket g\u00f6r det v\u00e4ldigt enkelt att l\u00e4gga till rikt inneh\u00e5ll med hj\u00e4lp av rails-applikationen.\n

TinyMCE har f\u00f6rm\u00e5gan att konvertera HTML-textf\u00e4lt eller andra HTML-element till editor-instanser. Den erbjuder olika HTML-formateringsverktyg f\u00f6r text s\u00e5v\u00e4l som f\u00f6r bilder\/videor (n\u00e4r det g\u00e4ller justering). Konfigurationer kan ske under integrationen med ett projekt vilket resulterar i flexibilitet i projektet.<\/p>\n\n

Anpassa TinyMce Editor 4, \u00e4ven med Ruby on Rails:<\/h4>\n

<\/h5>\n
L\u00e4gga till menyknapp:\u00a0<\/span><\/strong><\/h5>\n

Kopiera hela inneh\u00e5llet fr\u00e5n utvecklingspaketet TinyMce-4 och ha det i dina tillg\u00e5ngar eller offentliga mappar, det inneh\u00e5ller tinymces klasser, langs, plugins och andra filer, skript och allt du beh\u00f6ver.<\/p>\n

Namnge en knapp, h\u00e4r kommer jag att namnge som R.design, p\u00e5 klick visas rullgardinsmenyn med ett enda objekt som heter "menu1", vid klick, inneh\u00e5llet l\u00e4ggs till i editorn, gl\u00f6m inte att inkludera tinymce.min.js<\/p>\n\n

\n

tinymce.init({<\/em>\n v\u00e4ljare: "textomr\u00e5de",<\/em>\n setup: function(editor) {<\/em>\n editor.addButton('report_design', {<\/em>\n typ: 'menyknapp',<\/em>\n text: 'R.Design',<\/em>\n ikon: falskt,<\/em>\n meny: [<\/em>\n {text: 'menu1 ', onclick: function() {editor.insertContent('menu1');}}<\/em>\n ]<\/em>\n });<\/em>\n },<\/em><\/p>\n

plugins: [<\/em>\n "advlist autolink lists l\u00e4nk bild charmap f\u00f6rhandsgranskning ankare",<\/em>\n "s\u00f6k ers\u00e4tt visualblocks kod helsk\u00e4rm",<\/em>\n "insertdatetime media table context menu paste moxiemanager",<\/em>\n "emoticons trycker textf\u00e4rg"<\/em>\n ],<\/em>\n verktygsf\u00e4lt: "insertfile \u00e5ngra g\u00f6ra om | styleselect | fet kursiv | alignleft aligncenter alignright alignjustify | bullist numlist outdent indrag | l\u00e4nkbild | uttryckssymboler | f\u00f6rf\u00e4rg bakf\u00e4rg | skriv ut | meny "<\/em>\n });<\/em>\n v\u00e4ljare: "textomr\u00e5de"<\/em><\/p>\n<\/blockquote>\n

indikerar att editorn kommer att placeras f\u00f6r textomr\u00e5de av inmatningstyp.<\/p>\n\n

Anv\u00e4ndning med skenor:<\/span><\/strong><\/h5>\n
\n

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

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

\u00c4ndra ordning p\u00e5 verktygsf\u00e4ltsikoner, f\u00e4rgl\u00e4gga text och bakgrund. verktygsf\u00e4lt: "infoga fil \u00e5ngra g\u00f6ra om"<\/em>\nverktygsf\u00e4lt: "\u00e5ngra infoga fil g\u00f6r om"<\/em><\/p>\n

Om textf\u00e4rgikonen och bakgrundsf\u00e4rgen saknas \u00e4r allt du beh\u00f6ver l\u00e4gga till textf\u00e4rgen i dina plugins;[...] f\u00f6rst, anv\u00e4nd sedan f\u00f6rf\u00e4rgen och bakf\u00e4rgen i verktygsf\u00e4ltet, s\u00e5 att ikonen visas i redigerarens verktygsf\u00e4lt.<\/p>\n

Alla saker du inkluderar\/definierar i mappen tinymce\/plugins\/* kan anv\u00e4ndas i tinymce-redigeraren. verktygsf\u00e4lt: "f\u00f6rf\u00e4rg bakf\u00e4rg"<\/p>\n\n

\u00c4ndra tabellkant:\u00a0<\/span><\/strong><\/h5>\n
\n

Fil: tinymce\/skins\/lightgray\/content.min.css<\/em>\n Det har stil till\u00e4mpats f\u00f6r bord.<\/em>\n kantlinje: 1px streckad #BBBBBB;<\/em>\n \u00c5sidos\u00e4tt standardstilen, enkel och j\u00e4mf\u00f6relsevis b\u00e4ttre \u00e4n standard.<\/em>\n .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption {<\/em>\n kant: 1px helt svart;<\/em>\n border-collapse: kollapsa;<\/em>\n teckensnittsstorlek: 14px;<\/em>\n }<\/em><\/p>\n

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

Undermenyalternativ:\u00a0<\/span><\/strong><\/h5>\n
\n

meny: [<\/em>\n {<\/em>\n text:'Menyobjekt', meny:[ {text:'sub1',value:'val1'},{text:'sub2',value:'val2'}],<\/em>\n onclick: function() {editor.insertContent('<%= \u201cundermeny\u201d %>');}<\/em>\n }<\/em>\n ]<\/em><\/p>\n

Anv\u00e4nd tillsammans med skenor, ett klick p\u00e5 ett undermenyobjekt, infogning av objekt i redakt\u00f6rens textomr\u00e5de.<\/em>\n meny: [<\/em>\n {<\/em>\n text:'Student Basic Data', meny:[<% @object.each do |data| %>{text:'<%= data %>',<\/em>\n onclick: function() {editor.insertContent('<%= data %>');}},<% end %>]<\/em>\n }<\/em>\n ]<\/em>\n F\u00f6nsterhanterare<\/em>\n {<\/em>\n text:'Namn', onclick: function()<\/em>\n {<\/em>\n editor.windowManager.open({<\/em>\n titel: 'Pappersmarginaler',<\/em>\n kropp: [<\/em>\n {typ: 'textbox', namn: 'first', label: 'first name', value: \u201d},<\/em>\n {typ: 'textbox', namn: 'last', label: 'efternamn', v\u00e4rde: \u201d}<\/em>\n ],<\/em>\n onsubmit: function(e) {<\/em>\n \/\/ Infoga inneh\u00e5ll n\u00e4r f\u00f6nsterformul\u00e4ret skickas<\/em>\n editor.insertContent('First Name' + e.data.first);<\/em>\n editor.insertContent('Efternamn' + e.data.last);<\/em>\n }<\/em>\n });<\/em>\n }<\/em>\n }<\/em>\n Anv\u00e4nds l\u00e4ngs skenor<\/em>\n {text:'Margins', onclick: function()<\/em>\n {<\/em>\n editor.windowManager.open({<\/em>\n titel: 'Pappersmarginaler',<\/em>\n kropp: [<\/em>\n {<\/em>\n typ: 'textbox', namn: 'top', etikett: 'Margin top (cm)',<\/em>\n v\u00e4rde: '<%=@report.top om @custom_report.top.present? %>'<\/em>\n }<\/em>\n ],<\/em>\n onsubmit: function(e) {<\/em><\/p>\n

<%= remote_function(<\/em>\n :url => {:controller=>\u201dcontroller\u201d,:action => \u201caction\u201d},<\/em>\n :with => \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

Efter att ha vunnit f\u00f6rm\u00e5gan att tillhandah\u00e5lla RoR-l\u00f6sningar \u00f6ver hela v\u00e4rlden inom utveckling, drifts\u00e4ttning, hantering, \u00f6vervakning, st\u00f6dja dina appar, ger RailsCarma dig effektiva och f\u00f6renklade aff\u00e4rsl\u00f6sningar.<\/p>\n

L\u00e4s mer :\u00a0<\/em><\/p>\n\n