Mit diesem Tutorial ist es möglich TINYMCE in 4images zu integrieren.
Wer auf seiner Homepage keine JAVA Plugins einbinden möchte, kann dieses Tutorial überlesen. Für die Benutzung muss der User JAVA aktiviert haben. Ist java nicht aktiviert, wird der TINYMCE nicht angezeigt. Texteingaben sind weiterhin ohne Probleme möglich.
Vorteile:
- Einfache Integration von SMILEYS
- Schnell unf komfortable den text formatieren
- unabhängig vom BBCODE
- flexibel in den zusätzlichen Funktionen
Nachteil:
- Java MUSS aktiviert sein
- konnte bisher keine weiteren finden
Hinweise:
Cut & Paste:
http://www.4homepages.de/forum/index.php?topic=25098.msg138580#msg138580DEMO:
http://4images_1.rinaldos.homeip.net/details.php?image_id=6Folgende Schritte sind dafür notwendig.
Auf folgender Webseite das Mainpackage herunterladen
http://tinymce.moxiecode.com/download.phpNachdem Ihr dieses entpackt habt findet Ihr darin ein Verzeichnis tiny_mce. Dieses kopiert Ihr in das 4images ROOT (Hauptverzeichnis)
Die Struktur sollte danach so aussehen
/tiny_mce
/tiny_mce/langs
/tiny_mce/plugins
/tiny_mce/themes
/tiny_mce/utils
usw....
Nun müssen die Templates geändert werden, wo der TINYMCE aktiv sein soll.
So zum Beispiel comment_form.html, member_editcomment.html, member_editimage.html etc.....
In all den Dateien findet Ihr folgende Zeilen
<tr>
<td class="row2" valign="top"> </td>
<td class="row2">{bbcode}</td>
</tr>
diese können nun bedenklos gelöscht werden. Da der BBCODE nun von TINY übernommen wird. Wer die Zeilen nicht löschen mag, kann diese auch wie folgt auskommentieren
<!-- <tr>
<td class="row2" valign="top"> </td>
<td class="row2">{bbcode}</td>
</tr>-->
Danach fügen wir nun am Anfang der Dateien (sofern ein {header} vorhanden ist, dann darunter, folgenden Code ein.
<script type="text/javascript" src="{SCRIPT_URL}tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,emotions",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,emotions",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});
</script>
Eine ALL OPTIONS MÖGLICHKEIT sieht so aus.
Einige zusätzliche Module sind kostenpflichtig und in dem Standard Download nicht enthalten, daher rate ich von dem unteren Beispiel ab. Probiert einfach aus, was bei Euch funktioniert!!
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
Ihr könnt auch ein den Editor nach belieben anpassen. Beispiele und Codeintegrationen findet Ihr hier:
http://tinymce.moxiecode.com/examples/full.phpUm überflüssige Zeilenmbrüche die nach der Installation des TINYMCE entstehen müsst Ihr folgendes abändern.
findet in /include/functions.php folgenden Code
function format_text($text, $html = 0, $word_wrap = 0, $bbcode = 0, $bbcode_img = 0) {
if ($word_wrap && $text != "") {
$text = preg_replace("/([^\n\r ?&\.\/<>\"\\-]{".$word_wrap."})/i", " \\1\n", $text);
}
if ($html == 0 || $html == 2) {
$text = safe_htmlspecialchars($text);
}
// Replace { to prevent parsing in templates
global $site_template;
$text = preg_replace(
'='.preg_quote($site_template->start).'([A-Z0-9_]+)'.preg_quote($site_template->end).'=Usi',
'{\1}',
$text
);
if ($html !== 2) {
$text = nl2br(trim($text));
$text = replace_url($text);
}
ersetzt den Code mit
function nl2br_skip_html($text){
// remove any carriage returns (mysql)
$text = str_replace("\r", '', $text);
// replace any newlines that aren't preceded by a > with a <br />
$text = preg_replace('/(?<!>)\n/', "<br />\n", $text);
return $text;
}
function format_text($text, $html = 0, $word_wrap = 0, $bbcode = 0, $bbcode_img = 0) {
if ($word_wrap && $text != "") {
$text = preg_replace("/([^\n\r ?&\.\/<>\"\\-]{".$word_wrap."})/i", " \\1\n", $text);
}
/* if ($html == 0 || $html == 2) {
$text = safe_htmlspecialchars($text);
}*/
// Replace { to prevent parsing in templates
global $site_template;
$text = preg_replace(
'='.preg_quote($site_template->start).'([A-Z0-9_]+)'.preg_quote($site_template->end).'=Usi',
'&#123;\1&#125;',
$text
);
if ($html !== 2) {
$text = nl2br_skip_html(trim($text));
$text = replace_url($text);
}
Damit wird erreicht, dass die Zeilenumbrüche für den TINYMCE und für den REST des Systems entsprechend formatiert werden.
Es macht nur SINN den TINYMCE dort einzusetzen, wo Text formatiert werden soll. In den Textareas, wo unformatierter Text in die Datenbank eingefügt werden soll, insbesondere bei den Keywords, sollte der TINYMCE nicht eingebunden werden.
Um nun explizit den TINYMCE für die Bildbeschreibung einzusetzen, und nicht für die Suchwörter, versuche ich an dem folgenden Beispiel zu erläutern.
Als Beispiel nehme ich die Datei member_editimage.html
Dort seht Ihr folgenden Code:
<tr>
<td class="row1" valign="top"><b>{lang_description}</b></td>
<td class="row1">
<textarea name="image_description" cols="30" rows="10" wrap="virtual" class="textarea">{image_description}</textarea>
</td>
</tr>
<tr>
<td class="row2" valign="top"><b>{lang_keywords}</b></td>
<td class="row2">
<textarea name="image_keywords" cols="30" rows="10" wrap="virtual" class="textarea">{image_keywords}</textarea>
</td>
</tr>
Mit meiner Integration wäre nun der TINYMCE für beide TEXTAREAS aktiv. Wir wollen aber den TINYMCE nur in der TEXTAREA aktiv nutzen welche auch für die Bildbeschreibung zuständig ist.
Dafür müssen wir dem TINYMCE eine eindeutige Zuordnung nennen. Man kann dieses hier im Original nachlesen:
http://tinymce.moxiecode.com/examples/example_04.phpWir nennen nun unseren TINYMCE "mceAdvanced". Dafür fügen wir in diesem Abschnitt (funktioniert nur im theme: "advanced")
mode : "textareas",
theme : "advanced",
plugins : "safari,emotions",
unseren Namen ein:
Das ganze sieht dann so aus:
mode : "textareas",
theme : "advanced",
editor_selector : "mceAdvanced",
plugins : "safari,emotions",
In unserem Template müssen wir auch die Zuordnung machen, damit der TINY weiss wofür er zuständig sein soll. Dazu suchen wir uns die "textarea" für die Beschreibung:
<textarea name="image_description" cols="30" rows="10" wrap="virtual" class="textarea">{image_description}</textarea>
Hier definieren wir die Zuordnung über die CSS Definition class: "class="textarea"
Die Zeile ändern wir wie folgt ab:
<textarea name="image_description" cols="30" rows="10" wrap="virtual" class="mceAdvanced">{image_description}</textarea>
Das Ergebnis ist, das nur dort der TINYMCE aktiv die Formatierung übernimmt. Ich habe auf meiner Beispielseite zwei Felder für die Kommentare gemacht. Dort seht Ihr den Unterschied direkt. Das oberste Feld ist mit TINY, das untere nicht!
http://4images_1.rinaldos.homeip.net/details.php?image_id=6Folgende Browser werden unterstützt:
http://wiki.moxiecode.com/index.php/TinyMCE:CompatibilityHier steht zwar, das Safari 4.x (MAC OSX) nicht unterstützt wird. Da ich meistens mit diesem Safari im Netz unterwegs bin, weiss ich das der 4.0 und 4.01 für MAC OSX unterstützt wird.
Weiterer Vorteil, in der Textbox wo der Text eingegeben wird, ist die rechte Maustaste (kopieren und einfügen) aktiv.
Ich kann nur Hilfestellung für die integration geben,
einen Support für TINYMCE findet ihr auf der dortigen Homepage.
Gruß
Ingo