HTML-Editor mit Bild-Browser

HTML-Editor mit Bild-Browser

Seit Application Express 3.0 ist der frei verfügbare FCKEditor als Formularelement HTML Editor verfügbar (Abbildung 1) - manuell war die Integration auch schon vorher möglich.

HTML-Editor FCKEditor auf einer APEX-Seite

Abbildung 1: Anwendungsseite mit HTML-Editor

Allerdings bietet der HTML-Editor zur Zeit keine Möglichkeit zum Einbetten von Bildern in das HTML-Dokument an. Ein entsprechendes Icon ist in der Menüleiste nicht vorhanden. Grundsätzlich ist der Editor dazu jedoch in der Lage. Im folgenden erfahren Sie, wie Sie ihn so einrichten, dass das Einbetten von Bildern möglich wird. Die Bildauswahl wird über eine Seite in Ihrer Application Express-Anwendung erfolgen.

Vorbereitungen

Voraussetzung für diesen Tipp ist eine Tabelle mit Bildern. Wie Sie eine solche erstellen, wurde im Rahmen dieser Community-Seite bereits behandelt: Wenn Sie es noch nicht getan haben, arbeiten Sie am besten den Tipp "Bildbearbeitung mit Oracle Application Express" als Vorbereitung durch - was dort beschrieben ist, werden Sie für diesen Tipp benötigen. Füllen Sie die dabei erstellte Tabelle anschließend mit ein paar Bildern.

Einrichten des HTML-Editors

Erstellen Sie nun die Anwendungsseite mit dem HTML-Editor. Erzeugen Sie dann ein neues Element vom Typ Textbereich namens PX_EDITOR. Nehmen Sie nicht die in APEX 3.0 neuen Elementtypen HTML Editor (minimal) oder HTML Editor (Standard). Die Seite sollte dann wie in Abbildung 2 aussehen:

Anwendungsseite mit einfachem Textbereich

Abbildung 2: Anwendungsseite mit einfachem Textbereich

Erstellen Sie nun eine Datei "htmleditor_settings.js" mit folgendem Inhalt: 

FCKConfig.ToolbarSets["Toolbar_mit_Imageicon"] = [
  ['Source'], 
  ['Cut','Copy','Paste','PasteText'], 
  ['Print'], 
  ['Undo','Redo'], 
  ['Find','Replace'], 
  ['SelectAll'], 
  ['Image'],
  '/',
  ['Bold','Italic','Underline','StrikeThrough'], 
  ['Subscript','Superscript'], 
  ['OrderedList','UnorderedList'],
  ['Outdent','Indent'], 
  ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], 
  ['Table','Rule','SpecialChar'],
  '/',
  ['FontName'], 
  ['FontFormat'], 
  ['FontSize'], 
  ['TextColor','BGColor'], 
  ['FitWindow']
];
FCKConfig.ImageUpload = false;

Laden Sie diese dann als statische Datei in Ihren Workspace (Gemeinsame Komponenten - Statische Dateien).

Datei "htmleditor_settings.js" als statische Datei hochladen

Abbildung 3: Datei "htmleditor_settings.js" als statische Datei hochladen

Navigieren Sie nun wieder zur Anwendungsseite, dort zur Seitendefinition und kopieren Sie den folgenden JavaScript-Code in den Seiten-Footer. 

<script type="text/javascript" src="/i/fck/fckeditor.js"></script>
<script type="text/javascript">
<!-- 
function htmleditor_init() {
  var oFCKeditor        = new FCKeditor( 'PX_EDITOR' ) ;
  oFCKeditor.BasePath   = "/i/fck/" ;
  oFCKeditor.Width      = '760';
  oFCKeditor.Height     = '180';

  oFCKeditor.Config["CustomConfigurationsPath"] = '/pls/apex/#WORKSPACE_IMAGES#htmleditor_settings.js';
  oFCKeditor.Config["AutoDetectLanguage"]       = false;
  oFCKeditor.Config["DefaultLanguage"]          = "de";
  oFCKeditor.Config["ImageBrowserURL"]          = "/pls/apex/f?p=&APP_ID.:IMAGE_BROWSER:&SESSION.";

  oFCKeditor.ToolbarSet = 'Toolbar_mit_Imageicon';
  oFCKeditor.ReplaceTextarea() ;

}
addLoadEvent(htmleditor_init());
//-->
</script>

Starten Sie die Seite anschließend neu - Sie sollten den Textbereich nun als HTML-Editor wiedererkennen - im Gegensatz zum "APEX-Standard-Editor" ist nun oben rechts noch ein Icon zum Einbinden von Bildern vorhanden. Wenn Sie darauf klicken, bekommen Sie zunächst jedoch eine Fehlermeldung.

Der Textbereich ist in einen HTML-Editor umgewandelt

Abbildung 4: Der Textbereich ist in einen HTML-Editor umgewandelt

Für den nächsten Schritt benötigen Sie Zugang zum Server, auf dem Application Express installiert ist. Lassen Sie sich als ggfs. vom Administrator helfen. Das Verzeichnis, in welches das Application Express-Zip-Archiv ausgepackt wurde, wird im folgenden als $APEX_HOME bezeichnet.

  • Kopieren Sie die Datei fck_image.html nach $APEX_HOME/images/fck/editor/dialog .
  • Legen Sie auf im Verzeichnis $APEX_HOME/images/fck/editor/dialog ein neues Unterverzeichnis fck_image an.
  • Kopieren Sie die Dateien fck_image.js und fck_image_preview.html in dieses Verzeichnis.

Wenn Sie nun die Anwendungsseite nochmals starten und im HTML-Editor auf das Image-Icon klicken, sollten Sie nun keine Fehlermeldung mehr sehen, sondern den in Abbildung 5 dargestellten Dialog:

HTML-Editor mit Dialog zum Einbinden eines Bildes

Abbildung 5: HTML-Editor mit Dialog zum Einbinden eines Bildes

Sie sehen, dass Sie hier schon Angaben zum einzubettenden Bild machen können. So können Breite, Höhe oder Abstände festgelegt werden. Zur Auswahl des Bildes dient die Schaltfläche Server durchsuchen. Wenn Sie auf diese klicken, erhalten Sie im Moment noch Fehlermeldung. Das ist folgerichtig, denn den "Bild-Browser" werden Sie nun erst erstellen.

HTML-Seite mit dem Bild Browser einrichten

Der HTML-Editor ist flexibel; die einzubindenden Bilder können aus beliebigen Quellen stammen. Welche Bilder dem Anwender dabei angeboten werden, bestimmt sich durch die URL, die Sie im JavaScipt-Code oben unter oFCKEditor.Config["ImageBrowserURL"] angegeben haben - in diesem Beispiel ist es eine Application Express-Seite. Andere URL - sogar zu einem anderen Server - sind ebenso denkbar.

Erzeugen Sie eine neue Anwendungsseite und (das ist wichtig) geben Sie Ihr den Aliasnamen IMAGE_BROWSER. Auf dieser Seite wird eine Übersicht der verfügbaren Bilder erscheinen - der Nutzer kann dann eines anklicken und dieses wird dann ins HTML-Dokument mit einem <img>-Tag eingebettet.

Neue Seite mit Aliasnamen IMAGE_BROWSER erstellen

Abbildung 6: Neue Seite mit Aliasnamen IMAGE_BROWSER erstellen

Fügen Sie der Seite einen Bericht auf Ihre Tabelle mit den Bildern hinzu. Der Bericht sollte eine Übersicht über die vorhandenen Bilder darstellen, also am besten eine Vorschau (Thumbnail) und den Namen des Bildes anzeigen. Orientieren Sie sich dazu am Tipp Bildbearbeitung mit Application Express" - dort erfahren Sie, wie Sie eine Übersicht über die Bilder mit Thumbnail und Download-Möglichkeit einrichten. Achten Sie dabei besonders auf den Abschnitt zur Darstellung des vollständigen Bildes. Im Tipp wird dazu ein Anwendungsprozeß mit folgender URL angesprochen: 

f?p=&APP_ID.:&APP_PAGE_ID.::APPLICATION_PROCESS=Bild darstellen:::F111_BILD_ID:#ID#

ACHTUNG: Damit es später keine Probleme gibt, sollte diese URL und damit der Anwendungsprozeß öffentlich verfügbar sein; es muss möglich sein, das Bild ohne APEX-Login anzuzeigen. Testen Sie dies ggfs. vorher, indem Sie diese URL mit einer ID direkt in die Adreßzeile des Browsers eingeben - das Bild muss sofort erscheinen.

Diese URL wird nun benötigt. Wenn Sie den Bericht zur Bild-Übersicht auf der Seite fertiggestellt haben, fügen Sie entweder in den Regions-Header oder in den Seiten-Header folgenden JavaScript-Code hinzu - er dient dazu, die URL des ausgewählten Bildes an den HTML-Editor zurückzugeben: 

<script type="text/javascript">
  function SelectFile( fileUrl ) {
   window.opener.SetUrl( fileUrl );
   window.close() ;
 }
</script>

Navigieren Sie nun zu den Attributen des Berichts, welcher Ihre Bild-Übersicht darstellt. Wählen Sie die Spalte aus, welche der Anwender zur Auswahl eines Bildes anklicken soll.

Ein Bild wurd durch Klick auf die Berichtsspalte "NAME" ausgewählt

Abbildung 7: Ein Bild wurd durch Klick auf die Berichtsspalte NAME ausgewählt

Diese Spalte erhält nun einen HTML-Link - ein Klick darauf führt die JavaScript-Funktion SelectFile aus; diese wiederum gibt die URL des Bildes an den HTML-Editor zurück.

Link-Details zur Berichtsspalte NAME hinterlegen

Abbildung 8: Link-Details zur Berichtsspalte NAME hinterlegen

Abbildung 8 zeigt, wie Sie den HTML-Link erzeugen: Wählen Sie URL als Link-Ziel aus und hinterlegen Sie folgende URL: 

javascript:SelectFile(
  'http://[host]:[port]/pls/apex/' + 
  'f?p=&APP_ID.:&APP_PAGE_ID.::APPLICATION_PROCESS=Bild darstellen:::F111_BILD_ID:#ID#'
);

Da Bilder mit ihrer URL in HTML-Code eingebettet werden, dürfte es in den meisten Fällen sinnvoll sein, die URL vollständig (mit "http://" und dem Hostnamen) anzugeben. Bestätigen Sie alle Änderungen durch Klick auf Änderungen anwenden.

Damit sind Sie fertig. Starten Sie nun die Seite mit dem HTML-Editor neu und betten Sie ein Bild in den HTML-Code ein. Der Ablauf sollte in etwa wie in den folgenden Abbildungen aussehen:

Ausgangspunkt: Geben Sie ein wenig Text ein und klicken Sie das Image-Icon

Abbildung 10: Ausgangspunkt: Geben Sie ein wenig Text ein und klicken Sie das Image-Icon

Der Dialog zum Einbetten eines Bildes startet: Klicken Sie dort auf Server durchsuchen

Abbildung 11: Der Dialog zum Einbetten eines Bildes startet: Klicken Sie dort auf Server durchsuchen

Nun startet Ihre Application Express-Seite mit der Bildübersicht: Wählen Sie ein Bild aus

Abbildung 12:Nun startet Ihre Application Express-Seite mit der Bildübersicht: Wählen Sie ein Bild aus

Geben Sie Details zum auswählten Bild an

Abbildung 13: Geben Sie Details zum auswählten Bild an

Das Bild ist nun eingebettet

Abbildung 14: Das Bild ist nun eingebettet

HTML Quellcode des eingebetteten Bildes

Abbildung 15: HTML Quellcode des eingebetteten Bildes

Zurück zur Community-Seite