Integration von NicEdit in blogger.de

Inhalt:

1. NicEdit
2. Installation
3. Verwendung
4. Screenshot
5. Links
   

---

Persönlich finde ich es immer angenehm mit dem reinem Quelltext zu
arbeiten, aber dies hat auch seine Schattenseiten, vor allem wenn man
einen längeren Beitrag vorbereitet.
Dies war für mich der Grund zu testen ob es eine einfache kleine
Möglichkeit gibt einen WYSIWYG-Editor in blogger.de zu integrieren.
Auf dem Markt gibt es da einige Editoren, welche mich aber nicht durch
einfache Integration und geringe Dateigröße überzeugen konnten. Beim
Suchen nach einem geeignetem Editor bin ich auf NicEdit gestoßen.

NicEdit

Besteht aus nur einer Javascript Datei und lässt sich einfach über die
ID einer Textarea integrieren. Wenn man die Datei nicht selbst hosten will
kann man auch direkt mit dem Javascript von original Seite arbeiten.

01 <script src="http://js.nicedit.com/nicEdit-latest.js" 
02             type="text/javascript"></script>
03 <script type="text/javascript">bkLib.onDomLoaded(nicEditors.
04              allTextAreas);</script>                 

Dies habe ich nicht getestet.

Installation

• Herunterladen der Dateien von http://nicedit.com/download.php
• Hier kann man konfigurieren, welche Teile heruntergeladen
  werden sollen. Folgende Änderungen habe ich verwendet:
  
• nicSave entfernt
• nicUpload hinzufügen
• nicCode hinzugefügt
• Das Paket wird dann speziell gepackt und heruntergeladen.
• Das Archiv sollte man nun erst einmal lokal entpacken.
• Nun lädt man als erstes die Datei nicEditorIcons.gif per Files hoch.
• Jetzt muss man noch die Datei nicEdit.js anpassen.
• In der Datei muss die Zeile 31 modifiziert werden. (Nummer
  kann abweichen)
  iconsPath : '../nicEditorIcons.gif',
• Hier muss der Pfad der hoch geladenen Datei angegeben werden.
  iconsPath : 'http://stein.blogger.de/static/antville/stein/
  files/niceditoricons.gif',
  
  
• Jetzt lädt man noch die Datei nicEdit.js hoch.
• Danach muss man die Oberfläche des Editors anpassen.
• Layouts --> Stories --> Story editor form
• Anpassen des Editors
• Als erstes sollte man nach dem Tag oder ähnlich suchen
  <% story.content part="text" as="editor" cols="30" rows="15"
  class="formText" %>
• Dieser wird um id="formText" erweitert.
• Des Weiteren sollte man die Breite auf die selbe Breite
  der Ausgabe auf dem Blog anpassen. Dies ist aber nicht
  notwendig.
• Nun muss man noch entsprechend das Javascript einbinden:

01 <script src="http://stein.blogger.
02             de/static/antville/stein/files/nicedit.js" 
03             type="text/javascript"></script>
04 <script type="text/javascript">
05 bkLib.onDomLoaded(function() {
06    new nicEditor({fullPanel : true}).panelInstance(
07                  'formText');
08 });
09 </script>

• Natürlich angepasst an eure hoch geladene Datei und die id
  welche ihr verwendet habt.
• Nun sollte das ganze auch schon funktionieren. Der Editor wird nun
  automatisch beim Bearbeiten eines Beitrags geladen.

Verwendung

Die Verwendung des Editors sollte selbsterklärend sein, leider sind mir
ein paar Fehler aufgefallen:

• Die Funktion Remove Ident führt zu einem Fehler und sollte nicht
  verwendet werden. Leider weiß ich nicht genau wo der Fehler liegt.
• Der Editor unterstützt scheinbar nicht das der Text am Ende des
  Editors umgebrochen wird, dadurch wird der Text unter Umständen
  nicht vollständig angezeigt. Lösen kann man diese Problem wenn man
  den Editor genau an die Breite der Ausgabe anpasst und die jede
  Zeile mit Enter (Shift+Enter) beendet.

Noch habe ich nicht alle Funktionalitäten getestet, finde aber das es
sich bei weitem leichter schreiben lässt als wenn den HTML-Code selber
bearbeiten müsste. Und wenn man den Code bearbeiten will kann man dies
immer noch.

Screenshot