Bild-Plugin für tinyMCE

[steffenk]

nachdem ich lange gesucht habe, bin ich endlich fündig geworden.

Das Plugin ibrowse ist lizensfrei und enthält Bildauswahl mit Vorschau und auch eine Upload-Funktion.
Das ist wunderbar, kann man sich so einiges an Routinen sparen.

Die Installation ist sehr leicht - einfach den ibrowse-ordner in das plugin-Verzeichnis kopieren. Darin gibt es eine config.php, wo die Pfade und die Bild-Ordner festgelegt werden. Für den Upload müssen diese natürlich chmod 777 haben.

die Einbindung in das tinyMCE geschieht bei der Initialisierung, steht im Textfile.

Gerne werde ich später noch einige Erläuterungen geben, aber vorab könnt ihr ja selber mal probieren.

Wehrmutstropfen: In dem Dialog sind Sonderzeichen falsch, bei z.B. ü werden die Punkte vor das u gesetzt - k.A. wieso.
Im FF sind einige Werte im Dialog noch undefined, das muss noch gefixed werden.

Viel Spass damit.

[steffenk]

Das Umlautproblem habe ich lösen können.
Sprachdatei im Anhang

Ausserdem ein Update von ibrowse.php - jetzt gehts auch im FF

Hier auch der offizielle Projektlink:
http://sourceforge.net/tracker/index...81&atid=635684

[steffenk]

dachte eigentlich, das das einige gebrauchen könnten ...
hab ich wohl von mir auf andere geschlossen.

[MMLVc]

Hi, wollte dir mal sagen: DANKE !!!, bin schon seit stunden auf der Suche nach so einem Plugin für den Editor.

Hmm, ich krieg das nicht zum laufen, im PopUp werden nur die rvariablennamen angezeigt.


//edit: Ich hab´da ´nen anderen tollen OnlineEditor gefunden, vieleicht ist das auch was für dich: http://www.fckeditor.net/
Danke, MMLVc

[theo]

hallo steffen,

keine sorge ... es haben sicher schon einige gelesen und sich auch ueber den tip gefreut. nur scheint es beim einbau tatsaechlich ein paar kleine probleme zu geben.
nach anfaenglichen schwierigkeiten bei der initialisierung des objekts 'ta' ist auch bei mir die sache bei den angezeigten variablen stehengeblieben.

vielleicht waere es guenstig, wenn du das einbinden noch mal etwas ausfuehrlicher beschreiben wuerdest bzw. einfach eine bsp.-seite zeigen kannst. dann koennten wir es besser nachvollziehen.

hab vielen dank!


hardy

[steffenk]

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:

$tinyMCE_dir = '/home/web0/html/editor/'; 

als nächstes die Adresse der Domain:

$tinyMCE_base_url = 'http://www.meine-domain.de/'; 

Jetzt fügen wir den Ordner userpics zur Image-Liste hinzuzu (ebenfalls mit absolutem Pfad):

$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:

<!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.

[MMLVc]

Super!!!, Danke dafür!

[DSB]

Wow Steffen, Du bist so eine gute Seele von Programmierer.
Ich finds toll, dass Du anderen Dein Wissen und Deine Erfahrung so bereitwillig und vor allem verständlich mitteilst. *applaus*
Wenn Deutschland ein paar mehr von Deiner Sorte hätte, dann wäre hier keiner auf die Idee gekommen Inder zu importieren.

TinyCME werde ich auch für ein selbstgeschreibenes CMS-System nutzen und da kommt Dein PlugIn genau zum richtigen Zeitpunkt.
Vielen Dank.

[theo]

... zehn daumen hoch!

wenn es jetzt nicht mehr klappt, dann weiss ich nich ...


@dsb: vielleicht sollten wir steffen fuer benedikts erste heiligsprechung vorschlagen
... ach nee ... lieber nicht. sowas geht soweit ich weiss nur posthum.


hardy

[DSB]

@dsb: vielleicht sollten wir steffen fuer benedikts erste heiligsprechung vorschlagen

Achtung Kalauer:
Um Gottes Willen!

Dann steht uns hier ja nicht mehr zur Verfügung.
Allerdings müsste er dann für seien Weltreisen auch alle anderen Sprachen lernen: Cobol, Pascal, C++ ..

[theo]

... er soll doch kein programmierpapst werden.

if (date('ostern')) echo "urbi && orbi";

[Weede]

dachte das heißt "urbi @ orbi" ^^

nach dem durchlesen des ganzen, interessiert es mich jetzt brennend, was das überhaupt ist

[theo]

dachte das heißt "urbi @ orbi" ^^

hatte mich doch glatt versprochen ...

nach dem durchlesen des ganzen, interessiert es mich jetzt brennend, was das überhaupt ist

der oster- und weihnachtssegen. "der stadt und dem erdkreis"


ps: jetzt machen wir hier auch noch religionsunterricht

[nullpunkt]

hi,

erstmal danke für ausführlichen berichte hier.
ich wollte das plugin installieren, und habe nun das problem, dass
er mir den error ausgiebt, dass das verzeichnis nicht existiere.

ich habe die server- und die physischen pfade bestimmt korrekt abgegeben.

ich hab mit fehlerausgaben begonnen, habe aber nix gescheites gefunden.

den ordner hab ich auf 777 gesetzt...

kann mir jemand bei der analyse helfen? kennt jemand das tool in- und auswendig?

mfg nullpunkt

[steffenk]

wenn Du Dich noch ein paar Tage geduldest, kannst Du das brandneue ibrowser Plugin installieren. Das ist noch einfacher zu konfigurieren und zu handeln.
Einen kleinen Einblick bekommst Du hier

ansonsten - wie hast Du die Pfade deklariert ? Slash auch am Ende ?