nicht angemeldet
einen link über eine texteingabe in ein textarea schreiben
hallo,
ich habe jetzt schon ziemlich lang danach gesucht aber noch nichts für mich verwertbares gefunden, deswegen frage ich jetzt hier einmal.
ich benötige für ein kleines cms eine möglichst einfache eingabe für links und e-mail adressen. ich möchte also, ähnlich wie in einigen foren üblich, nach einem klick auf einen button, grafik, was auch immer, eine eingabe bekommen in der ich den linktitel eingeben kann und nach der bestätigung eine eingabe in der ich den link selbst angebe. nach dem absenden der zweiten eingabe sollte das ganze dann in ein textarea eingefügt werden, und zwar in dieser form:
[url=http://www.link.de]linktitel[/url]
ich wäre über hilfe äußerst dankbar, da ich mich mit javascript nicht im geringsten auskenne und im normalfall js-freies php bevorzuge.
small-step
-
Hallo small-step,
ich benötige für ein kleines cms eine möglichst einfache eingabe für links und e-mail adressen. ich möchte also, ähnlich wie in einigen foren üblich, nach einem klick auf einen button, grafik, was auch immer, eine eingabe bekommen in der ich den linktitel eingeben kann und nach der bestätigung eine eingabe in der ich den link selbst angebe. nach dem absenden der zweiten eingabe sollte das ganze dann in ein textarea eingefügt werden, und zwar in dieser form:
Zwei kleine Schritte (*scnr*) in die JavaScript-Programmierung:
Nicht gerade cooles aber funktionierendes Eingabefeld:
prompt() http://selfhtml.teamone.de/javascript/objekte/window.htm#prompt[url=http://www.link.de]linktitel[/url]
Stringverkettungsoperator + http://selfhtml.teamone.de/javascript/sprache/operatoren.htm#zeichenkettenverknuepfung
Und hier in SELFHTML und im SELFFORUM herumstöbern, die Suche und das Archiv benutzen ...
Gruss,
Vinzenz
-
hallo vinzenz,
danke erstmal für die schnelle antwort!
Zwei kleine Schritte (*scnr*) in die JavaScript-Programmierung:
Nicht gerade cooles aber funktionierendes Eingabefeld:
prompt() http://selfhtml.teamone.de/javascript/objekte/window.htm#promptStringverkettungsoperator + http://selfhtml.teamone.de/javascript/sprache/operatoren.htm#zeichenkettenverknuepfung
wenn ich dich richtig verstanden habe gebe ich jetzt also zwei variablen einen namen, nennen wir sie link und linktitel, verknüpfe sie mit + und klebe ein paar pseudotags daran, richtig?
etwas in dieser art hatte ich auch im hinterkopf, mein großes problem war jetzt, wie gebe ich das in der textarea aus?
gruss,
small-step
-
Hallo,
als kleine Anregung schicke ich Dir ein auf MSIE funktionierendes Testscript. Das müsste auch auf den meisten anderen Browsern zum Laufen zu bekommen sein. Für Netscape muss man nur ein anderes Eventcaching einbauen.
<!-- ------------------------------------------------------------ -->
<html><head><title>Test</title>
<script type="text/javascript">
<!--ausgabestr="Druecken Sie irgendwelche Tasten!";
cursorpos=0;function get_cursor_str()
{
cursorStr = "<span style='background-color:cyan;'>" +
ausgabestr.substr(cursorpos,1) + "</span>";return cursorStr;
}function ausgabe()
{
// alert("Sie haben die Taste mit dem Wert " + window.event.keyCode + " gedrueckt");cursorstr=get_cursor_str();
document.getElementById("textfeld").innerHTML =
ausgabestr.substr(0,cursorpos) +
cursorstr +
ausgabestr.substr(cursorpos+1,65335);
}//window.captureEvents(Event.KEYDOWN); // für Netscape
//window.onkeypress = cap;//function cap(ereignis)
//{
// alert(ereignis.which);
//}function move_cursor()
{
var taste=window.event.keyCode;switch(taste)
{
case 37:
cursorpos--;
if (ausgabestr.substr(cursorpos,1)==">")
{
do
{
cursorpos--;
}
while (ausgabestr.substr(cursorpos,1)!="<");
cursorpos--;
}
break;case 39:
cursorpos++;
if (ausgabestr.substr(cursorpos,1)=="<")
{
do
{
cursorpos++;
}
while (ausgabestr.substr(cursorpos,1)!=">");
cursorpos++;
}
break;}
ausgabe();
}function tastendruck()
{ausgabestr=ausgabestr.substr(0,cursorpos)
+String.fromCharCode(window.event.keyCode)
+ausgabestr.substr(cursorpos,65535);cursorpos++;
ausgabe();
}
function init1()
{
ausgabe();
}//-->
</script>
</head>
<!--
<body onKeyDown="ausgabe();">
-->
<body onkeyDown="move_cursor();" onKeyPress="tastendruck();" onLoad="init1();"><div ID="textfeld">
</div>
</body></html>
<!-- ------------------------------------------------------------- -->Solltest due es weiterentwickeln, dann hätte ich gerne eine Rückmeldung. Wir hatten hier im Forum die letzten Tage schon mehrfach über eine solche "WYSIWYG"-Oberfläche gesprochen und dabei herausgefunden, dass dies wohl der einzig parktikable Weg bei soviel wie möglich Browsern ist. Andere Lösungen mit iFrames und Desingmode sind MS-Proprietär.
Noch was zu Styles:
Einfügen mit Buttons.
Nimm einen Toggle-Button für Fett, etc. NICHT einen für "ein" und einen für "aus. Merk Dir, an welcher Stelle der Style-Button eingeschaltet wurde und lass den Cursor solange nicht nach links darüber hinaus, bis er wieder ausgeschaltet wurde. Das Ein- und Ausschalten verusachen jeweils den <...> tag. Außerdem müssen noch die HTML-Sonderzeichen, also z.B. ü behandelt werden.Viel Spaß
Liebe Grüße aus http://www.braunschweig.de
Tom
--
Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.-
hallo,
als kleine Anregung schicke ich Dir ein auf MSIE funktionierendes Testscript. Das müsste auch auf den meisten anderen Browsern zum Laufen zu bekommen sein. Für Netscape muss man nur ein anderes Eventcaching einbauen.
dankeschön ;-)
Solltest due es weiterentwickeln, dann hätte ich gerne eine Rückmeldung. Wir hatten hier im Forum die letzten Tage schon mehrfach über eine solche "WYSIWYG"-Oberfläche gesprochen und dabei herausgefunden, dass dies wohl der einzig parktikable Weg bei soviel wie möglich Browsern ist. Andere Lösungen mit iFrames und Desingmode sind MS-Proprietär.
hm... na ja, ich möchte keinen wysiwyg-editor nachbasteln, ich wollte eigentlich nur die eingabe verfremdeter html-tags so einfach wie möglich gestalten um es... na ja, idiotensicher zu machen. dabei benötige ich aber nur einen e-mail und http:// - tag. mein problem hierbei war, dass javascript für mich bisher völlig undurchsichtig und nicht zu durchschauen war und ist, mit php und asp komme ich weit besser klar. mit serverseitigen scripts allerdings eine anwendung auf dem client zu starten dürfte recht schwierig ausfallen ;-)
Noch was zu Styles:
Einfügen mit Buttons.
Nimm einen Toggle-Button für Fett, etc. NICHT einen für "ein" und einen für "aus. Merk Dir, an welcher Stelle der Style-Button eingeschaltet wurde und lass den Cursor solange nicht nach links darüber hinaus, bis er wieder ausgeschaltet wurde. Das Ein- und Ausschalten verusachen jeweils den <...> tag. Außerdem müssen noch die HTML-Sonderzeichen, also z.B. ü behandelt werden.ich wollte die eingabe in einer komplett neuen eingabe ermöglichen, den tag zu öffnen und nach der eingabe wieder zu schließen hielt ich in diesem fall für zu umständlich und, da der tag aus zwei eingaben besteht, auch für den user zu kompliziert.
Viel Spaß
gleichfalls und vielen dank für die mühe ;-)
grüße,
small-step
-
hallöchen...
ich schon wieder. ich hoffe dass mein eintrag hier noch gefunden wird.
ich habe mir das folgende script zusammengestückelt:
-------------------------------------------------------
<script language="Javascript" type="text/javascript">
<!--
function insert(action) {
var message=document.textausgabe.textbox.value;if (action=="url") {
var url = prompt("geben sie die komplette url ein.","");
if(url==null){return;}var title prompt("geben sie nun den titel der url ein.","");
if (title==null){return;}document.textausgabe.textbox.value = message + "[url=" + url + "]" + title + "[/url]");
document.textausgabe.textbox.focus();
return;
}
}
//-->
</script><a href="javascript: insert('url');">url</a>
<form name="textausgabe">
<textarea name="textbox"></textarea>
</form>
-------------------------------------------------------allerdings muss ich zu meiner schande gestehen dass es nicht gerade funktioniert. davon abgesehen weiß ich noch immer nicht allzuviel über js... ich weiß, langsam wird es nervig, aber... please help? :-(
small-step
-
Hallo small-step
Hab's nur kurz überflogen ...
<script language="Javascript" type="text/javascript">
...
var title prompt("geben sie nun den titel der url ein.","");
---^--- Da fehlt der Zuweisungsoperator
if (title==null){return;}
...
allerdings muss ich zu meiner schande gestehen dass es nicht gerade funktioniert. davon abgesehen weiß ich noch immer nicht allzuviel über js... ich weiß, langsam wird es nervig, aber... please help? :-(
Ist schön, wenn einer hartnäckig bei der Sache ist und selbst was macht :-)
Ich weiß, ich hab' Dich selbst auf die Idee mit prompt gebracht :-(
Wenn Du aber für die Eingaben von 'url' und 'title' ebenfalls Formularfelder verwendest, und für das Einfügen einen Button, auf dessen onclick-Ereignis Du mit Deiner Funktion reagierst, dann macht das mehr Sinn.Gruss,
Vinzenz
-
hallo vinzenz
Ist schön, wenn einer hartnäckig bei der Sache ist und selbst was macht :-)
na es würde nur halb soviel spaß machen wenn ich es abschreiben würde ;-)
Ich weiß, ich hab' Dich selbst auf die Idee mit prompt gebracht :-(
Wenn Du aber für die Eingaben von 'url' und 'title' ebenfalls Formularfelder verwendest, und für das Einfügen einen Button, auf dessen onclick-Ereignis Du mit Deiner Funktion reagierst, dann macht das mehr Sinn.um ehrlich zu sein, über die nutzung von formularfeldern hatte ich selbst schon nachgedacht, allerdings hatte ich zu anfang die nutzung von php im sinn. allerdings hielt ich es für ziemlich dämlich die kompletten formulardaten mehrere male zwischen server und client rotieren zu lassen bevor sie gespeichert werden. aus diesem grund auch das ausweichen auf js.
ich habe das ganze jetzt mal provisorisch umgestaltet, es sieht jetzt folgendermaßen aus:
-----------------------------------------------------
<script language="Javascript" type="text/javascript">
<!--
function insert(action) {
var message=document.textausgabe.textbox.value;
var link=document.linkeingabe.link.value;
var linktitel=document.linkeingabe.linktitel.value;if (action=="url") {
if(url==null){return;}
if (title==null){return;}document.textausgabe.textbox.value = message + "[url=" + link + "]" + linktitel + "[/url]";
document.textausgabe.textbox.focus();
return;
}
}
//-->
</script><form name="linkeingabe">
<input type="text" name="link">
<input type="text" name="linktitel">
<input type="button" onClick="insert(url)" value="ok">
</form><form name="textausgabe">
<textarea name="textbox"></textarea>
</form>
-----------------------------------------------------besser gefallen würde es mir allerdings, wenn es auch eine auswirkung hätte... sagte ich bereits dass ich nur schwer des javascript's meister werde? ;-)
small-step
-
Hallo small-step
ich habe das ganze jetzt mal provisorisch umgestaltet, es sieht jetzt folgendermaßen aus:
Ist schon ganz gut, noch drei Fehler:
<script language="Javascript" type="text/javascript">
<!--
function insert(action) {
var message=document.textausgabe.textbox.value;
var link=document.linkeingabe.link.value;
var linktitel=document.linkeingabe.linktitel.value;if (action=="url") {
if(url==null){return;}1. --^-- Variable url ist undefiniert, Du meinst link
Anmerkung: Leere Textboxen enthalten nicht den Null-Wert, sondern
einen Leerstring (gilt auch beim nächsten Fehler ;-) )if (title==null){return;}
2. --^-- Variable title sollte linktitel sein
document.textausgabe.textbox.value = message + "[url=" + link + "]" + linktitel + "[/url]";
document.textausgabe.textbox.focus();
return;
}
}
//-->
</script><form name="linkeingabe">
<input type="text" name="link">
<input type="text" name="linktitel">
<input type="button" onClick="insert(url)" value="ok">--^-- Variable url ist undefiniert. An dieser Stelle willst Du die Zeichenkette 'url' übergeben ...
Anmerkung: Die Formularmethode hat keinen Übergabeparameter nötig.
</form>
<form name="textausgabe">
<textarea name="textbox"></textarea>
</form>besser gefallen würde es mir allerdings, wenn es auch eine auswirkung hätte... sagte ich bereits dass ich nur schwer des javascript's meister werde? ;-)
Da das Skript Fehler enthält, hat es keine Auswirkung - zu diesen kommt es gar nicht erst.
Für das Debugging von JavaScript stellen Dir die Browser Hilfsmittel zur Verfügung, Du mußt diese aber aktivieren, z.B:
IE 6: Extras->Internetoptionen->Erweitert
Skriptdebugging deaktivieren - bitte deaktivieren :-)
Skriptfehler anzeigen - bitte aktivierenOpera 6.05:
Datei->Einstellungen->Multimedia
JavaScript-Fehlermeldungen anzeigen - was wohl?Mozilla/Netscape: JavaScript-Konsole
Nach Ausführen des Skripts einfach
javascript:
in der Adresszeile eingeben.Gruss,
Vinzenz
-
hallo vinzenz,
Ist schon ganz gut, noch drei Fehler:
wurden beseitigt, das script läuft jetzt einwandfrei
Anmerkung: Leere Textboxen enthalten nicht den Null-Wert, sondern
einen Leerstring (gilt auch beim nächsten Fehler ;-) )es wird jetzt nicht mehr auf null geprüft, sondern auf "", ich denke das war dein wink mit dem zaunpfahl, hm? ;-)
Anmerkung: Die Formularmethode hat keinen Übergabeparameter nötig.
hm... da soll später nochmal das gleiche für e-mail adressen dazukommen, aus diesem grund habe ich mich dafür entschieden.
herzlichsten dank für deine hilfe, ich glaube tatsächlich mehr ahnung von js zu haben als zuvor, es hat sich gelohnt ;-)
small-step
-
-
-
-
-
-
-
Hallo small-step
wenn ich dich richtig verstanden habe gebe ich jetzt also zwei variablen einen namen, nennen wir sie link und linktitel, verknüpfe sie mit + und klebe ein paar pseudotags daran, richtig?
Richtig.
etwas in dieser art hatte ich auch im hinterkopf, mein großes problem war jetzt, wie gebe ich das in der textarea aus?
Stimmt, das hatte ich vergessen, obwohl es doch der Titel Deines Postings war :-(
Eine Textarea ist ein Formularelement, wie man auf Formularelemente zugreift, steht ebenfalls in Selfhtml, http://selfhtml.teamone.de/javascript/objekte/elements.htm#allgemeines
1. Herausfinden, wie Du die textarea ansprechen kannst.
2. Eigenschaft 'value' setzen.Gruss,
Vinzenz
-
-