Deutsch
PHP, HTML & JavaScript- Forum

Erledigt: Texteditor in JS

 

Thomas
Zielinski
Hallo Leute,
ich versuch gerade ein CMS zu basteln. Bis auf eine kleinigkeit läuft auch alles. Das einzigste was mir Sorgen bereitet, ist der Editor für neue Beiträge. Ähnlich dem Editor hier in der Community soll man bestimmte Tags per Button direkt einfügen können. Das Problem liegt nun bei den Bildern.
Es ist unbekannt wie viele Bilder verwendet werden. Daher muss die eingabe der Bilder die Hochgeladen werden sollen Dynamisch sein. Das wird von der Funktion newImage() gelöst. Zumindist fügt diese neu Inputfelder type="file" ein. Eigentlich wollte ich die Pfade zum späteren Hochladen per Post an die entsprechende Seite senden, allerdiengs gehen dabei die Pfade verloren. Also dacht ich mir, vorher die Daten in ein Hiddenelement umzuspeichern (Solange man die Seite nicht verlässt bleibt der Pfad im Value des Input type="file"). Ich könnte vorher die Daten an eine JS-Funktion senden ins Hiddenelement speichern unnd dann weiter an die Seite zum auswerten senden. Dazu bin ich aber zu doof --> HILFE! Wie geht das?
Durch ein Klick auf den Button rechts neben dem Input type="file" soll dann der Tag in das Textarea eingefügt werden ([IMG SRC="entsprechender Pfad"]). Doch wird dieser Button dynamisch über die Funktion newImage() eingefügt und alle Versuche dort ein onClick einzufügen so wie ich es bei denn statischen Buttons gemacht habe. Allerdings war es mir nicht möglich, dieses onClick mit einzubauen. Also auch hier: Wie geht das?

Dank schonmal im Vorraus.

Folgender Script(JS):
(komplet Sichtbar unter  [...]  )
<?php Echo blub:.$_POST[bildpfad1]; ?>
<script type="text/javascript">
<!--
var bildzahl = 0;

function addText(area,typ) {

    if (typ == b1) {

        area.value += "[B]";
        the_button = document.getElementById(fett1);
        the_button.style.display = none;
        the_button = document.getElementById(fett2);
        the_button.style.display = ;

    }

    else if (typ == b2) {

        area.value += "[/B]";
        the_button = document.getElementById(fett2);
        the_button.style.display = none;
        the_button = document.getElementById(fett1);
        the_button.style.display = ;

    }

    //... und so weiter alle Buttons durch

}

function newImage() {

    bildzahl++;
    var Ausgabebereich = document.getElementById("Bilder");
    var myINPUT = document.createElement("input");
    myINPUT.type = file;
    myINPUT.size = 45;
    myINPUT.name = IMGINPUT+bildzahl;
    Ausgabebereich.appendChild(myINPUT);
    var myHIDDEN = document.createElement("input");//<-- hiddenelement in das vor dem Senden der Pfad gespeichert werden soll um ihn nicht zu verlieren.
    myHIDDEN.type = hidden;
    myHIDDEN.name = bildpfad+bildzahl;
    myHIDDEN.value= ;
    Ausgabebereich.appendChild(myHIDDEN);
    var myBUTTON = document.createElement("input");//<-- onClick-Ereigniss einsetzen ähnlich addText() mit IMG
    myBUTTON.type = button;
    myBUTTON.value = Bild einfügen;
    Ausgabebereich.appendChild(myBUTTON);
    var myBR = document.createElement("br");
    Ausgabebereich.appendChild(myBR);

}

//-->
</script>
<form action="<?php Echo $_SERVER[PHP_SELF]; ?>" method="POST">
<textarea name="blubtext" rows="20" lang="de" cols="53"></textarea><br>
<input type="button" value="Fett" onClick="addText(this.form.blubtext,b1)" id="fett1">
<input style="display:none" type="button" value="/Fett" onClick="addText(this.form.blubtext,b2) " id="fett2">
<input type="button" value="Kursiv" onClick="addText(this.form.blubtext,k1)" id="kursiv1">
<input style="display:none" type="button" value="/Kursiv" onClick="addText(this.form.blubtext,k2) " id="kursiv2">
<input type="button" value="U" onClick="addText(this.form.blubtext,u1)" id="unter1">
<input style="display:none" type="button" value="/U" onClick="addText(this.form.blubtext,u2) " id="unter2">
<input type="button" value="&Uuml;berschrift" onClick="addText(this.form.blubtext,h1)" id="h1">
<input style="display:none" type="button" value="&Uuml;berschrift" onClick="addText(this.form.blubtext,h2)" id="h2">
<input type="button" value="Table" onClick="addText(this.form.blubtext,t1)" id="t1">
<input style="display:none" type="button" value="/Table" onClick="addText(this.form.blubtext,t2)" id="t2">
<input type="button" value="Tr" onClick="addText(this.form.blubtext,tr1)" id="tr1">
<input style="display:none" type="button" value="/Tr" onClick="addText(this.form.blubtext,tr2)" id="tr2">
<input type="button" value="Td" onClick="addText(this.form.blubtext,td1)" id="td1">
<input style="display:none" type="button" value="/Td" onClick="addText(this.form.blubtext,td2)" id="td2">
<input type="Submit" value="Save" id="saveacomment">
<div id="Bilder"><input value="Neues Bild laden" type="button" onClick="newImage();"><br></div>
<script type="text/javascript">newImage();</script>
</form>

Gruß Thomas
 
XProfan X4; Win10 x64
Der Kuchen ist eine lüge!
25.06.2009  
 



Zum Text+Bild gibt es zur Zeit 2 gängige Möglichkeiten, ein Applet (Java) oder ein editierbarer Body (Contenteditable).

Ein einfaches Beispiel für Variante 2 zeigt vBulletin z.B. bei Paule  [...]  . (eingeloggt sein) (Klick die Smilies.)

Das ist das "gängige" Prinzip was auch leicht adaptierbar ist.

Die ganzen anderen Probleme lösen sich mit einer Session bzw. mit einem Cookie, ansonsten nur per Variablenweitergabe von Formular zu Formular.

Du kannst Dein Hochladeformular auch in ein hidden Iframe lenken per Target, die dahinterliegende PHP kann JavaScript zurücksenden an Top wie <script>top.myInsertToMyEdit("someText")</script> um die "Antwort" in Dein Edit zu senden.
 
25.06.2009  
 




Thomas
Zielinski
Ich hab das gefühl du verstehst mich falsch.
Beim ersten Punkt werd ich das mit denn Keksen machen oder Session. Mal sehn worauf ich lust bekomme.
Was den Zweiten unkt angeht reden wir einander vorbei. Ich will nicht das Bild direkt einfügen. Ist mir schnuppe. Ist schließlich ja nur für schreiber. Sondern ein Tag in das Textarea ala [IMG SRC="entspechender Pfad"]. Für normal würde Ich hier den Button so gestalten <input type="button" onClick="der funktionsaufruf">. Nur bekomme ich hier:

kein onClickereigniss mit herrein was dann auslösen würde. Das soll ja dynamisch sein. Beim Hochladen von Anhängen hier in der Community funktioniert die Anzahl der Felder zum eintragen doch auch Dynamisch, iF.
Gruß Thomas
 
XProfan X4; Win10 x64
Der Kuchen ist eine lüge!
25.06.2009  
 



Dazu war der Tip gedacht:

Du kannst Dein Hochladeformular auch in ein hidden Iframe lenken per Target, die dahinterliegende PHP kann JavaScript zurücksenden an Top wie <script>top.myInsertToMyEdit("someText")</script> um die "Antwort" in Dein Edit zu senden.
 
25.06.2009  
 



Ah, mir ist eingefallen wo ich das so tu - im aktuellen smallBum  [...]  !

Sogar gleichzeitig bis zu 5 Downloads.

(diese Variante lässt sich auch grob erweitern)
;if ($_FILES[postfilein][size]>$_smallbum_conf[MaxUploadSize])
die("< script style=text/javascript>;top.gal_ui_upfreset(".$uploadTargetForm.")< /script>")
 
25.06.2009  
 




Thomas
Zielinski
Ah okay. Hat ich übersehn. Ich versuchs mal. Das klingt gut.
 
XProfan X4; Win10 x64
Der Kuchen ist eine lüge!
25.06.2009  
 



Habe ich erst danach angefügt, "Nachtrag:" hat gefehlt, hast Du also wahrscheinlich garnicht mal übersehen.

Mist, hab schon wieder ne Idee.
 
25.06.2009  
 




Thomas
Zielinski
Rück ruhig immer raus damit. Ich hab zwar nur rudimentärste Grundkentinisse von JS aber ein Plan B kann nie schaden.
Gruß Thomas
 
XProfan X4; Win10 x64
Der Kuchen ist eine lüge!
25.06.2009  
 



Sorry, keine zum Thema.

Das Stabilste ist wirklich wenn Du das < form target="myIframe" ... > als Antwort ein < script type="text/javascript" >;top.eineFunc("[insertText]")< /script > zurückgeben lässt. Im main halt eine function eineFunc(s){ die s dann ins Edit einfügt. Dadurch das Du dem Form auch ein onSubmit verpassen kannst, kannst Du sogar dynamisch das form.target ändern.

So gesehen ist JS wie XProfan ein Schlaraffenland. ^^ (und PHP natürlich auch)
 
25.06.2009  
 



Antworten


Thementitel, max. 100 Zeichen.
 

Systemprofile:

Kein Systemprofil angelegt. [anlegen]

XProfan:

 Beitrag  Schrift  Smilies  ▼ 

Bitte anmelden um einen Beitrag zu verfassen.
 

Themenoptionen

9.991 Betrachtungen

Unbenanntvor 0 min.
iF28.09.2020
Nkh201821.07.2018
Walter01.10.2017
Michael Borowiak30.11.2014
Mehr...

Themeninformationen

Dieses Thema hat 2 Teilnehmer:

iF (5x)
Thomas Zielinski (4x)


Admins  |  AGB  |  Anwendungen  |  Autoren  |  Chat  |  Datenschutz  |  Download  |  Eingangshalle  |  Hilfe  |  Händlerportal  |  Impressum  |  Mart  |  Schnittstellen  |  SDK  |  Services  |  Spiele  |  Suche  |  Support

Ein Projekt aller XProfaner, die es gibt!


Mein XProfan
Private Nachrichten
Eigenes Ablageforum
Themen-Merkliste
Eigene Beiträge
Eigene Themen
Zwischenablage
Abmelden
 Deutsch English Français Español Italia
Übersetzungen

Datenschutz


Wir verwenden Cookies nur als Session-Cookies wegen der technischen Notwendigkeit und bei uns gibt es keine Cookies von Drittanbietern.

Wenn du hier auf unsere Webseite klickst oder navigierst, stimmst du unserer Erfassung von Informationen in unseren Cookies auf XProfan.Net zu.

Weitere Informationen zu unseren Cookies und dazu, wie du die Kontrolle darüber behältst, findest du in unserer nachfolgenden Datenschutzerklärung.


einverstandenDatenschutzerklärung
Ich möchte keinen Cookie