ok, ich erläutere mal, wie man das ganze einbindet.
Als erstes muss timyMCE auf den server geladen werden.
Ich nehme als Beispiel den Ordner /editor, indem alles abgelegt wird.
Der Ordner editor befindet sich im root und hat folgende Struktur:
-langs
-plugins
-themes
blank.htm
tiny_mce.js
tiny_mce_popup.js
tiny_mce_src.js
In den Ordner plugins wird der Ordner ibrowser reinkopiert.
Dieses Plugin wollen wir erst mal konfigurieren.
Damit die User nicht Webimages löschen, nehmen wir einen Order /userpics,
den wir auch im root erstellen und mit chmod 777 belegen.
Dann gehen wir in den ordner editor/plugins/ibrowser und öffnen die Datei config.php mit einem Editor.
Wir geben als erstes den
absoluten Pfad unseres editor-Ordners ein:
PHP-Code:
$tinyMCE_dir = '/home/web0/html/editor/';
als nächstes die Adresse der Domain:
PHP-Code:
$tinyMCE_base_url = 'http://www.meine-domain.de/';
Jetzt fügen wir den Ordner userpics zur Image-Liste hinzuzu (ebenfalls mit absolutem Pfad):
PHP-Code:
$tinyMCE_imglibs = array(
array(
'value' => '/home/web0/html/userpics/',
'text' => 'User-Bilder',
),
// array(
// 'value' => '',
// 'text' => 'not configured',
// ),
);
und speichern die Datei.
Jetzt ein Beispiel, wie wir den tinyMCE in die Seite einbinden.
Es gibt 3 Modi, wie tinyMCE auf textareas reagieren soll:
mode textareas - alle textareas werden zum Editor
mode specific_textareas - alle texteareas mit bestimmtem Attribut werden zum Editor
mode exact - nur die in elements aufgelisteten Textareas werden zum Editor
Der Einfachheit halber nehmen wir den ersten Modus.
Wir wollen einen full-feature-Editor aufbauen mit deutscher Sprache und den Toolbars oben, wie man das von anderen Editoren gewohnt ist.
Die Features verlangen den advanced Modus.
Wir haben 3 Toolbar-Leisten zur Verfügung, denen wir neben den Standardbuttons vorher oder nachher die Plugins zufügen können.
woolen wir z.B. der 3. Zeile an erster Stelle Buttons hinzufügen, so definieren wir sie mit
theme_advanced_buttons3_add_before : "plugin1,plugin2,seperator",
So sieht eine Beispielseite dann aus:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="javascript" type="text/javascript" src="/editor/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
language: "de",
theme : "advanced",
plugins : "table,save,advlink,emotions,insertdatetime,zoom,searchreplace,print,ibrowser,preview",
theme_advanced_buttons1_add_before : "",
theme_advanced_buttons1_add : "forecolor,backcolor,seperator",
theme_advanced_buttons2_add_before : "",
theme_advanced_buttons2_add : "",
theme_advanced_buttons3_add_before : "",
theme_advanced_buttons3_add : "seperator,insertdate,inserttime,seperator,emotions,ibrowser,seperator,preview,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
content_css : "example_full.css",
plugin_insertdate_dateFormat : "%d.%m.%Y",
plugin_insertdate_timeFormat : "%H:%M:%S"
});
</script>
<h1>Editor</h1>
<form>
<textarea cols="60" rows="40" style="width:500px;height:400px;">
</textarea>
</form>
</body>
</html>
und schon ist alles einsatzbereit.
Der Ibrowser ist nicht zu verwechseln mit dem normalenen "insert Image", wo lediglich eine Url zum Bild eingesetzt wird. Das Symbol für den IBrowser ist in der untersten Reihe das 3. von rechts.
Ich hoffe, der Ansatz gibt einen Einstieg und hilft, den Editor an eigenen Bedürfnisse anzupassen.
