WYSIWYG HTML Editor in Rails

21. Jan 2010

Stellen wir uns vor, wir haben einen Kunden, der gerne selbst Texte, Blogeinträge o.ä. über unsere neue Railsanwendung speichern und veröffentlichen möchte. Kurz nach Beginn des Meetings gibt es immer diesen einen Satz, den man als Webentwickler natürlich nicht gerne hört “Es soll einfach so sein wie Word.”. Natürlich ist es nicht einfach, mal eben so die grundlegenden Funktionen von Word im Internet abzubilden, sogar in Rails nicht ;-)

Zum Glück gibt es für Webseiten Alternativen auf Javascript Basis. Ich möchte euch vorstellen, wie ihr mit dem CKEditor in sehr wenigen Schritten aus einem Textfeld in einem Rails View einen echten WYSIWYG Editor a la Word macht.

Schritt 1: Unser Railsview
Als Ausgangspunkt dient ein einfaches Railsformular, das ein textarea Feld enthält

  1. <% form_for @post do |f| %>
  2.   <%= f.error_messages %>
  3.   <p>
  4.     <%= f.label :content %><br />
  5.     <%= f.text_area :content%>
  6.   </p>
  7.   <p><%= f.submit "Submit" %></p>
  8. <% end %>

Dies ist unser Ausgangspunkt.
editor_raw

Schritt 2: CKEditor downloaden
Ihr ladet euch nun den CKEditor unter http://ckeditor.com/download runter und entpackt diesen in das

RAILS_ROOT/public/javascripts/ckeditor

Verzeichnis. Das wars auch schon fast :-)

Schritt 3: CKEditor einbauen
Nun zum wichtigsten Schritt, das einbauen des Editors, so dass dieser anstelle des normalen Editors geladen wird. Hierzu fügt ihr folgende Textzeile in euer Rails layout File (meistens views/layouts/application.html.erb) ein:

<%=javascript_include_tag 'ckeditor/ckeditor.js'%>

Nun wird der Editor geladen. Damit er aber auch im richtigen Textarea Feld geladen wird, kommen noch folgende Anpassungen in eurer View-File:

  1. <% form_for @post do |f| %>
  2.   <%= f.error_messages %>
  3.   <p>
  4.     <%= f.label :content %><br />
  5.     <%= f.text_area :content, :id => "editor1" %>
  6.                 <script type="text/javascript">
  7.                                                 //<![CDATA[
  8.                                                         CKEDITOR.replace( 'editor1',
  9.                                                                 {
  10.                                                                         toolbar :
  11.                                                                         [
  12.                                                                                 ['Save','-','Cut','Copy','Paste','PasteText','PasteFromWord','Source','Find','Replace'],                       
  13.                                                                                 ['SelectAll','RemoveFormat'],                                                                          
  14.                                                                                 ['Undo','Redo','-','Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','Image'],
  15.                                                                                 ['Styles','Format','Font','FontSize','TextColor','BGColor'],
  16.                                                                         ]
  17.                                                                 });
  18.  
  19.                                                 //]]>
  20.                                                 </script>
  21.   </p>
  22.   <p><%= f.submit "Submit" %></p>
  23. <% end %>

Hier seht ihr, dass ich dem textarea Feld die ID “editor1″ gegeben habe. Danach wird per Javascript der Editor (mit ein paar angepassten Optionen) geladen.

Nun sollte euer Contentfeld ungefähr so aussehen:
editor_ckeditor

Praktischerweise erzeugt der Editor einfaches HTML, dass genauso in der Datenbank abgespeichert und ausgebeben werden kann. Natürlich ist hierbei auch auf die Sicherheit zu achten, also niemals ungeprüftes HTML ausgeben.

Ich hoffe, dieses kleine Tutorial konnte euch helfen, schnell und einfach einen WYSIWYG Editor in Rails einzubauen.

Kommentar vom Autor: Es gibt nicht nur die Möglichkeit, einen Javascript-basierten Editor für das erstellen von HTML Inhalten über Formulare zu verwenden, sondern auch Sprachen wie Textile, die die Erstellung von HTML Elementen vereinfachen. Leider sind nach meinen Erfahrungen selbst diese vereinfachten Elemente für den normalen “Wordbenutzer” noch zu komplex. Ich setze lieber auf einen guten WYSIWYG Editor.

Kategorie: Rails | 1 Kommentar »

Veröffentlicht am Donnerstag, den 21. Januar 2010 um 17:43 Uhr veröffentlicht

Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Eine Reaktion zu “WYSIWYG HTML Editor in Rails”

 

  1. Jonathan Am 21. Januar 2010 um 21:39 Uhr

    vielen dank. ich suche aber immer noch einen offline editor für mein wordpress. früher gabs mal einen, der wurde aber nicht weiterentwickelt. leider.

Einen Kommentar schreiben

Du mußt angemeldet sein, um kommentieren zu können.