Einfügen von Links oder Bilder in Textarea

[sheeba1507]

Hallo zusammen,

in einem Formular-Textfeld möchte ich die Möglichkeit anbieten,
Links oder Bilder mit einzufügen, so wie hier im Posting-Formular.

Wie sieht so ein Script-Zusatz aus ?
Mit welchem Suchbegriff kann ich Google bemühen ?

Gruß, Mike

[Talwin]

AW: Einfügen von Links oder Bilder in Textarea

Hi,

dazu verwendet man JavaSkript Funktionen. Die musst Du dann per onclick event aufrufen, z.B. bei den entsprechenden Buttons. Ich verwende diese Funktionen:

/* Funktionen zum Einfuegen von strings in Formulare */

         function insert(form, field, str) {
             var input = document.forms[form].elements[field];
             input.focus();
             /* fuer Internet Explorer */
             if(typeof document.selection != 'undefined') {
                 /* Einfuegen des BBCodes */
                 var range = document.selection.createRange();
                 var insText = range.text;
                 range.text = insText + str;
                 /* Anpassen der Cursorposition */
                 if (insText.length == 0) {
                     // nichts
                 }
                 else {
                     // nichts      
                 }
                 range.select();
             }
             /* fuer neuere auf Gecko basierende Browser */
             else if(typeof input.selectionStart != 'undefined') {
                 /* Einfuegen des BBCodes */
                 var start = input.selectionStart;
                 var end = input.selectionEnd;
                 var insText = input.value.substring(start, end);
                 input.value = input.value.substr(0, start) + insText + str + input.value.substr(end);
                 /* Anpassen der Cursorposition */
                 var pos;
                 if (insText.length == 0) {
                     pos = start + str.length;
                 }
                 else {
                     pos = start + insText.length + str.length;
                 }
                 input.selectionStart = pos;
                 input.selectionEnd = pos;
             }
             /* fuer die uebrigen Browser */
             else {
                 input.value = input.value + str;
                 input.focus();
             }  
         } // end function insert
         
         function insertBBCode(form, field, code) {
             var input = document.forms[form].elements[field];
             input.focus();
             /* fuer Internet Explorer */
             if(typeof document.selection != 'undefined') {
                 /* Einfuegen des BBCodes */
                 var range = document.selection.createRange();
                 var insText = range.text;
                 range.text = "[" + code + "]" + insText + "[/" + code + "]";
                 /* Anpassen der Cursorposition */
                 if (insText.length == 0) {
                     range.moveEnd('character', -(code.length + 3));
                 }
                 else {
                     // nichts
                 }
                 range.select();
             }
             /* fuer neuere auf Gecko basierende Browser */
             else if(typeof input.selectionStart != 'undefined') {
                 /* Einfuegen des BBCodes */
                 var start = input.selectionStart;
                 var end = input.selectionEnd;
                 var insText = input.value.substring(start, end);
                 input.value = input.value.substr(0, start) + "[" + code + "]" + insText + "[/" + code + "]" + input.value.substr(end);
                 /* Anpassen der Cursorposition */
                 var pos;
                 if (insText.length == 0) {
                     pos = start + code.length + 2;
                 }
                 else {
                     pos = start + code.length + insText.length + code.length + 5;
                 }
                 input.selectionStart = pos;
                 input.selectionEnd = pos;
             }
             /* fuer die uebrigen Browser */
             else {
                 input.value = input.value + "[" + code + "]" + "[/" + code + "]";
                 input.focus();
             }
         } // end function insertBBCode

         function insertLink(form, field) {
             var linkText = 'Link Beschreibung (optional):';
             var linkTarget = 'Bitte geben Sie die URL ein:';
             var input = document.forms[form].elements[field];
             input.focus();
             /* fuer Internet Explorer */
             if(typeof document.selection != 'undefined') {
                 /* Einfuegen des Links */
                 var range = document.selection.createRange();
                 var insText = range.text;
                 var url = prompt(linkTarget,'http://');
                 if((insText.length == 0) && (url != null) && (url.length != 0)) {
                     insText = prompt(linkText,'');
                 }
                 if((url.length != 0) && (insText != null)) {
                     if(insText.length != 0) {
                         range.text = "[url=" + url + "]" + insText + "[/url]";
                     }
                     else {
                         range.text = "[url]" + url + "[/url]";
                     }
                 }
                 /* Anpassen der Cursorposition */
                 if (insText.length == 0) {
                     // nichts
                 }
                 else {
                     // nichts
                 }
                 range.select();
             }
             /* fuer neuere auf Gecko basierende Browser */
             else if(typeof input.selectionStart != 'undefined') {
                 /* Einfuegen des Links */
                 var start = input.selectionStart;
                 var end = input.selectionEnd;
                 var insText = input.value.substring(start, end);
                 var url = prompt(linkTarget,'http://');
                 if((insText.length == 0) && (url != null) && (url.length != 0)) {
                     insText = prompt(linkText,'');
                 }
                 if((url.length != 0) && (insText != null)) {
                     if(insText.length != 0) {
                         input.value = input.value.substr(0, start) + "[url=" + url + "]" + insText + "[/url]" + input.value.substr(end);
                     }
                     else {
                         input.value = input.value.substr(0, start) + "[url]" + url + "[/url]" + input.value.substr(end);
                     }
                 }
                 /* Anpassen der Cursorposition */
                 var pos;
                 if (insText.length == 0) {
                     pos = start + url.length + 11;
                 }
                 else {
                     pos = start + url.length + insText.length + 12;
                 }
                 input.selectionStart = pos;
                 input.selectionEnd = pos;
             }
             /* fuer die uebrigen Browser */
             else {
                 input.value = input.value + "[url][/url]";
                 input.focus();
             }
         } // end function insertLink 

Bei Fragen dazu, einfach melden!

Gruß Talwin

[sheeba1507]

AW: Einfügen von Links oder Bilder in Textarea

Sorry, aber ich hatte vergessen zu erwähnen, daß ich eine
Lösung ohne JS verwenden möchte.

Ich habe bei mir generell JS deaktiviert. Trotzdem kann ich hier
im Posting-Formular diese Möglichkeiten nutzen.
Also muß es auch eine JS-freie Version geben.

Gruß, Mike

[Talwin]

AW: Einfügen von Links oder Bilder in Textarea

Sorry, aber ich hatte vergessen zu erwähnen, daß ich eine
Lösung ohne JS verwenden möchte.

Ich habe bei mir generell JS deaktiviert. Trotzdem kann ich hier
im Posting-Formular diese Möglichkeiten nutzen.
Also muß es auch eine JS-freie Version geben.

Gruß, Mike

Sicher?
Bei mir gehts ohne JS nicht hier. Überprüfe Deine Einstellung.
Aber rein logisch gesehen kann es nur Clientseitig gehen, muss also eine Clientseitige Skriptsprache sein -> JS

[Ingo]

AW: Einfügen von Links oder Bilder in Textarea

Hi,

Ich habe bei mir generell JS deaktiviert. Trotzdem kann ich hier im Posting-Formular diese Möglichkeiten nutzen.

dann musst Du für diese Seiten Javascript zugelassen haben. Ohne Javascript ist vB auch kaum vernünftig nutzbar...

Gruß
Ingo