Blog des uneingeschränkten Wissens:)

Hab ich soeben entdeckt, sehr interessante Einführung in das Spry-Framework mit dem Dreamweaver CS3 von Marc Thiele:

https://admin.emea.adobe.acrobat.com/_a301811518/p21088191/

Auf diesem Link bin ich mehr oder weniger durch Zufall gestolpert. Im Vergleich zum FCKEditor und Konsorten wird dieser Editor sicherlich sehr einfach gehalten sein, leider ist das Tutorial noch in Bearbeitung. Ist aber sicherlich ein interessantes Thema, deshalb möchte ich es hier mal verewigen um es zum späteren Zeitpunkt ggf. wieder aufzugreifen bzw. mir das Teil mal genauer anzusehen:

www.almsamim.com

UPDATE: Neuer Link!

Hätte nicht gedacht dass es so einfach ist, dank der Funktion execCommand und der iFrame Eigenschaft designMode kann denke ich jeder in kürzester Zeit so einen Editor basteln. Ich dachte immer man muss sich erstmal aufwändige Search’n'Replace Prozeduren basteln und Inputboxen oder iFrames vergewaltigen. Dabei wird eigentlich alles was man dafür braucht im JavaScript schon schlüsselfertig mitgeliefert.

Aufgabenstellung:
Ein TabControl mit Tabsheets aus DIV-Elementen, welche aufgrund der Ãœberlappung mittels position:absolute ausgerichtet wurden in eine bestehende Website integrieren. Allerdings ist je nach Link der Contentbereich unterschiedlich lang, so dass der Content über den bestehenden Seitenrand manchmal hinausragt. Auf overflow:scrollbars soll allerdings verzichtet werden, stattdessen soll sich die Länge des Contentbereichs wie bei position:static automatisch dem Textfluss anpassen.

Lösung:
Unter dem mit position:absolute ausgerichtem DIV-Element einfach ein leeres DIV-Element mit der Ausrichtung position:static anlegen und mittels JavaScript die Höhe des TabSheets ermitteln und an das darunterliegende Element übergeben.

Das Script muss beim Laden des ersten Tabsheets, sowie beim wechseln der Tabsheets ausgeführt werden und könnte etwa wie folgt aussehen:

 function tabControl(tabId) {
document.getElementById(’maincontent’).style.height=    document.getElementById(tabId).offsetHeight + 30;
}

Wenn ich mit dem freien jQuery Framework mittels AJAX bzw. jQuery.get() ein Template lade, kann ich auf dessen HTML-Elemente später nicht mehr über jQuery zugreifen. Ãœber meinen eigenen JavaScript-Code kann ich dennoch auf die besagten Elemente zugreifen.

Ich habe derzeit keine Ahnung warum das so ist, vielleicht hinterlässt mir hier jemand einen Kommentar der mir weiterhilft… oder geht das dann generell nicht?

ImageFlow ist eine freie Bildergalerie für Websites, welche dem iTunes CoverFlow-Effekt nachempfunden ist. Imageflow wurde komplett in JavaScript und CSS implementiert und ist somit Browser / Flash-PlugIn unabhängig.

Um das Script sauber innerhalb einer Website zu implementieren müssen derzeit leider noch ein paar Dinge beachtet werden:

• In der Datei Screen.css wird das IMG-Attribut überschrieben, somit werden sämtliche Bilder auf der Website entsprechend der hier angegebenen Formatierung ausgegeben. Deshalb sollte in der CSS-Datei der Stylesheet img abgeändert werden in img.flow. Auf der Ausgabeseite müssen dann die für den Imageflow betroffenen Bilddaten zusätzlich um das Attribut class=”flow” erweitert werden.
• Zum genauen Positionieren sollte das DIV-Element “imageflow” innerhalb eines weiteren DIV-Elements z.B. flowpos Verschachtelt werden. Das Stylesheet zu flowpos könnte in etwa so aussehen:

  #flowpos{
  position:absolute;
  left: 200px;
  top: 140px;
  width: 620px;
  height: 150px;
  overflow:hidden;
  }

  Allerdings müssen nun auch die anderen Elemente imageflow, images, scrollbar, captions und loading ggf. neu ausgerichtet werden. Wenn wir uns das obige Beispiel vornehmen erhalt imageflow z.B. ein margin-top: -130px;

• Damit nicht bei jedem anklicken das ganze CoverFlow neu geladen werden muss empfiehlt es sich hier mit AJAX zu arbeiten. Besonders komfortabel geht das wiederum mit JQuery, hierzu habe ich folgende Funktion implementiert:

  function getAjaxContent(requestURL) {
  $.get(requestURL, function(text){
  $(”#content div”).html(text).fadeIn(’slow’);
  });
  }

  Dazu muss natürlich JQuery zunächst eingebunden sein und ein DIV-Element mit der ID “content” sollte existieren. Weiterhin muss man zwei Anpassungen an der Datei imageflow.js vornehmen. Die beiden Vorkommen von “document.location = this.url;” sollten durch “getAjaxContent(this.url);” ersetzt werden.

ImageFlow gibts hier zum herunterladen:
http://imageflow.finnrudolph.de

Eine Einführung in JQuery gibts hier vom 12 Jahre alten Dmitri Gaskin *respekt*
http://www.youtube.com/watch?v=8mwKq7_JlS8

Standardmäßig werden im FCKEditor nach dem Bild- oder Dateiupload nur relative Pfade zur Datei gespeichert. In einem mehrbenutzerfähigen System liegen die Daten aber häufig in einer zentralen Datenbank und sollen von verschiedenen URLs abgerufen werden. Ein weiteres Szenario wäre z.B. ein HTML-Newsletter mit absoluten Pfaden zu den Bilddaten auf dem Webserver.

Um den Filebrowser im FCKEditor auf absolute Pfade umzustellen kann man die Datei “fckeditor\editor\filemanager\browser\default\frmresourceslist.html wie folgt modifieren.

// Build the link to view the folder.
var sLink = ‘<a href=”#” onclick=”OpenFile(\” + ProtectPath( fileUrl ) + ‘\’);return false;”>’ ;

Erweitern wir einfach um die Stamm-URL (die URL der zentralen Datenhaltung):

// Build the link to view the folder.
var sLink = ‘<a href=”#” onclick=”OpenFile(\’http://www.meinesite.de’ + ProtectPath( fileUrl ) + ‘\’);return false;”>’ ;

Um den WYSIWYG-HTML-Editor in ein mehrbenutzerfähiges System (z.B. eine Mall oder gemeinsam genutztes CMS mit getrennter Dateiverwaltung) zu integrieren sind folgende Anpassungen notwendig:

1. Die entsprechende Nutzer-ID in der Klasse “FCKeditor” deklarieren:
   var $userId;
   
2. Die Nutzer-ID in der Methode “FCKeditor()” (in Klasse FCKeditor) initieren:
   $this->userId = ”;
   
3. Weiter unten, in “CreateHtml()” den Querystring in der Variable $Link erweitern:
   $Link = “{$this->BasePath}editor/{$File}?InstanceName=
   {$this->InstanceName}&userId={$this->userId}” ;
4. Nun benötigen wir eine Funktion um den Querystring in JavaScript auszuwerten, hierfür binden wir folgendes Script in die Datei fckeditor.html ein: querystring.js (download). Dies erfolgt z.B. über die Funktion LoadScript(’../querystring.js’) und muss vor dem Aufruf LoadScript(’../fckconfig.js’) erfolgen.
5. Anschließend ergänzen wir die fckconfig.js um folgende Zeilen:
   var qs = new Querystring();
   var _userId = qs.get(”userId”);
   Dies sollte unbedingt noch vor den Deklarationen “FCKConfig.Linkbrowser = true” etc. erfolgen.
6. Jetzt ergänzen wir noch die URLs sämtlicher Filebrowser um folgende Parameterübergabe:
   FCKConfig…URL = …Extension + ‘?CMS_ID=’ + _CMSID ;
7. Abschließend fangen wir die Variable im Filemanager ab und ergänzen den Pfad in der Variable $Config['UserFilesPath'] in der Datei editor\filemanager\connectors\php\config.php um die Nutzer-Id ‘mein/pfad/’.$userId.’/';
   Weiterhin müssen wir $Config['Enabled'] auf true setzen.

Nun sollte jeder Benutzer seine Dateien in ein eigenes Verzeichnis hochladen und niemand kommt sich mit seinen Dateien in die Quere. Da die Quickupload-Funktion Probleme bereitet hat habe ich diese deaktiviert, die Anwender müssen somit über den Filemanager Ihre Dateien hochladen und verwalten.
Diese Angaben basieren auf dem FCKEditor 2.51 in Verbindung mit PHP 4

Da das mitgelieferte „ExtendScript-Toolkit“ über keine Syntaxvervollständigung verfügt (jedenfalls bei mir in der CS2) und das Objektmodell nur schlecht dokumentiert ist, muss man sich mit anderen Tools behelfen.

Hier habe ich mal die wichtigsten Werkzeuge und Links zusammengetragen:

• Die offizielle Adobe InDesign Scripting Reference als PDF
• Hier gibts das ganze auch Online: InDesignScriptingReference.com
• Hilfe rund um InDesign-Scripting gibts bei hildirselbst.ch
• Dort gibts auch Script um sich im InDesign das ObjectModel zeichnen zu lassen.
• Noch viel praktischer ist der InDesign ObjectBrowser
• Man kann sich auch  mit alert(app.selection[0]); das aktuell im InDesign ausgewählte Objekt ausgeben lassen, sofern man den Objektnamen nicht kennt.

Wirklich toll wäre ein vernünftiger Ersatz für das „ExtendScript-Toolkit“ mit Syntaxvervollständigung, dann müsste man das ObjektModell nicht auswendig lernen:-)
Wenn jemand ein Tool kennt bitte hier Posten!!!