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

Dieses JavaScript Objekt entstand im Rahmen eines privaten Projekts für die Studenten des Umwelt-Campus Birkenfeld.

Grundsätzlich bietet es die Möglichkeit die Tweets mehrere Twitter-Accounts per JavaScript abzufragen und die Ergebnisse dann in XUL darzustellen. (Anpassungen an HTML sollten nur geringfügig sein)

Der Code sollte in einer Firefox Extension einwandfrei laufen, wobei darauf zu achten ist das ein TabHandler benötigt wird oder die Teile im Quellcode geändert werden müssten.

Bei Fragen einfach einen Kommentar hinterlassen.

Codeauszug

001 twitter = {
002    news : new Array(),
003    channels : new Array({name:"super_stein",http_request:
004                         null,loaded:null}),
005    url : "http://api.twitter.com/1/statuses/user_timeline.
006    json?include_rts=true&include_entities=true&id=",
007    url_open : {pre:"http://twitter.com/",past:"/status/"},
008    count : "20",
009    timer : {timer : null , speed : null},
010    style : true,
011    load : function () {
012       this.loadChannels();
013       this.setTimer();
014    },
015    setTimer : function () {
016       this.timer.speed=10*60000;
017       if (this.timer.timer!=null) {
018          this.timer.timer.cancel();
019          this.timer.timer=null;
020       }

Download

twitter (js, 6 KB)

hiermit starte ich meinen Blog. Hier soll es nicht um viel persönliches gehen, auch wenn dies schon interessant seien könnte. Thema des Blogs sollen Informationen, Quellcode und vieles Mehr rund ums Programmieren sein.
Erstmal werde ich mit ein paar Beiträgen zu Firefox oder Thunderbird Extensions anfangen und dann wird sich zeigen wie sich der Blog entwickelt.

Gruß super_stein