Textarea mit html-tags

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Textarea mit html-tags

    Hallo Zusammen,
    das ist mein erster Beitrag in diesem Forum. Ich hoffe, ihr heißt mich alle herzlich Willkommen.
    zu meiner Frage: ich möchte gerne eine Art Textarea programmieren, in der die user Texte schreiben können. Sie können einen Text markieren und beispielsweise auf einen Botton klicken, dann muss der Text kursiv, fett oder was auch immer erscheinen. Also wie bei yahoo, web.de... (wenn man eine email verfassen möchte). Es wäre sehr schön, wenn die HTML-Tags nicht erscheinen.
    Ich weiß, dass sowas nicht mit HTML gehen kann. Aber ich habe gehört, dass man sowas duch javascript erreichen kann.
    Ich würde mich über eure Hilfe freuen.
    Danke im Voraus!!
    Stichworte: -
  • #2
    Google -> HTMLArea Oder FCKEditor
    Liebe Grüße,
    SteKoe!

    PHP Tutorials
    Peter Kropff | Quakenet | Schattenbaum.net

    Kommentar

    • #3
      Mir fällt noch tinyMCE ein.

      LG

      Kommentar

      • #4
        Danke Freunde für die Antworten. Ich brauche aber den Quellcode, um ihn an meine Webseite zu binden und die Ausgabe zu nutzen. Ich habe nach htmlArea in Google gesucht. Ich fand zahlreiche webseiten, aber ich kann das irgendwie nicht nutzen. Weil ich sie nicht an meine Webseite binden kann. Oder sehe ich das falsch. Ich brauche eure Hilfe. Danke nochmal!

        Kommentar

        • #5
          Die gibt's alle im vollen Quellcode als Download. Die HTMLArea ist eingestellt, FCKEditor dürfte da die bessere Wahl sein.

          Kommentar

          • #6
            hier der fertige code, welchen du gewünnscht hast.
            musst halt einfach noch die images hinzufuegen / andere einfügen!
            gruss, und viel spass!

            PHP-Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <            html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
            <            head>
            <            title>Verbessertes Eingabefeld (WYSIWYG-Editor)</title>
            <            meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

            <            style type="text/css">
                .            imagebutton {
                                width: 20px;
                                height: 20px;
                                border: 0px;
                                border-color: #FFFFFF;
                                display: inline; }
                            img {
                                border: 0px;
                }
                            #edit {
                                border: solid 1px #CDCDCD; }
                            a {
                                text-decoration:none; }
                            a:hover {
                                color: #33FFFF; }
                            a:visitied {
                                color:#0000FF;
                            }
            </            style>
            <            script type="text/javascript"><!--

                var                formu, ifrm, uagent=navigator.userAgent.toLowerCase(),
                                isGecko = ( uagent.match('gecko') && navigator.productSub>=20030210 ),
                                isIE = uagent.match('msie') && !uagent.match('opera') && (!uagent.match('msie 5.5')||!uagent.match('msie 6.'));

                function             initEdit(strFormu,strEdit,strDefTxt) {
                                formu = document.getElementById(strFormu);
                    if (            isIE)
                                    ifrm = window.frames[strEdit].document;
                    if (            isGecko)
                                    ifrm = document.getElementById(strEdit).contentWindow.document;
                                ifrm.designMode = 'on';
                    if (            strDefTxt)
                                    with (ifrm) {
                                        open();
                                        write(strDefTxt);
                                        close();
                        }
                    var             kids = document.getElementsByTagName('div');
                    for (            i in kids)
                        if (            kids[i].className == 'imagebutton')
                                        kids[i].onclick = tbclick;
                                document.getElementById(strEdit).contentWindow.focus();
                }

                function             tbclick() {
                    var             id = this.id;
                    if (            id == 'CreateLink' && isIE)
                                    ifrm.execCommand(id); 
                    else {
                        if (            id=='FontName' || id=='FontSize') {
                                        sel = document.getElementById(id).childNodes;
                                        sel = isIE ? sel[0] : sel[1];
                                        arg = sel.options[sel.selectedIndex].firstChild.data; } 
                        else if (            id == 'InsertImage')
                                        arg = prompt('Enter a image location:', 'http://');
                        else if (            id == 'CreateLink')
                                        arg = prompt('Enter a URL:','http://');
                        else 
                                        arg = null;
                                    ifrm.execCommand(id,false,arg);
                    }
                }

                function             processData() {
                                formu.content.value = ifrm.body.innerHTML;
                      if( !            formu.content.value.replace(/<br>|\s|&nbsp;/ig,'') ) {
                                    alert('You did not enter any Text!');
                        return             false;
                    }
                    return             true;
                }
            //--></script>

            </head>


            <            body onload="initEdit('form_content','edit','Text in the Text-Area')">
            <            div style="position:absolute;left:10px;top:10px">

            <            form onsubmit="return processData()" id="form_content" action="newpage.asp" method="post"><div>
                <            div class="imagebutton" id="FontSize">
                    <            select>
                    <            option>1</option>
                    <            option>2</option>
                    <            option selected="selected">3</option>
                    <            option>4</option>
                    <            option>5</option>
                    <            option>6</option>
                    <            option>7</option>
                   </            select>
                </            div>&nbsp;&nbsp;
                
                <            div class="imagebutton" id="FontName">
                    <            select>
                        <            option>Arial</option>
                        <            option selected="selected">Times New Roman</option>
                        <            option>Comic Sans MS</option>

                    </            select>
                </            div><br />
                
                <            div class="imagebutton" id="bold">
                        <            a href="#" onclick="return false" style="font-weight:bold"><img src="pics/newpage/ed_format_bold.gif"></a>
                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="italic">
                    <            a href="#" onclick="return false" style="font-style:italic"><img src="pics/newpage/ed_format_italic.gif"></a>

                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="underline">
                    <            a href="#" onclick="return false" style="text-decoration:underline"><img src="pics/newpage/ed_format_underline.gif"></a>
                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="justifyleft">
                    <            a href="#" onclick="return false"><img src="pics/newpage/ed_align_left.gif"></a>
                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="justifycenter">
                    <            a href="#" onclick="return false"><img src="pics/newpage/ed_align_center.gif"></a>
                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="justifyright">
                    <            a href="#" onclick="return false"><img src="pics/newpage/ed_align_right.gif"></a>
                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="insertorderedlist">
                    <            a href="#" onclick="return false"><img src="pics/newpage/ed_list_num.gif"></a>
                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="insertunorderedlist">
                    <            a href="#" onclick="return false"><img src="pics/newpage/ed_list_bullet.gif"></a>
                </            div>&nbsp;&nbsp;

                <            div class="imagebutton" id="CreateLink">

                    <            a href="#" onclick="return false"><img src="pics/newpage/ed_link.gif"></a>
                </            div><br />
                <            div class="imagebutton" id="indent">
                    <            a href="#" onclick="return false"><img src="pics/newpage/"></a>
                </            div>&nbsp;&nbsp;
                
                <            div class="imagebutton" id="outdent">
                    <            a href="#" onclick="return false"><img src="pics/newpage/"></a>

                </            div>&nbsp;&nbsp;
                <            div class="imagebutton" id="InsertImage">
                    <            a href="#" onclick="return false"><img src="pics/newpage/ed_image.gif"></a>
                </            div>
                
                <            br />
                <            iframe id="edit" name="edit" width="400" height="200" frameborder="2" marginheight="0" marginwidth="0"></iframe>
                <            textarea name="content" style="display:none"></textarea>

                <            div style="width: 400px;" align="right">

                    <            input type="submit" value="Submit!" />
                </            div>
            </            div></form>

            </            div></body></html> 

            Kommentar

            • #7
              ich kann tinymce nur empfehlen, ist kostenlos usw
              Und sehr einfach erweiterbar zudem gibs im netz genug funktionen dafür um es ordentlich in ein forum zu verbauen mit bb tags usw

              Kommentar

              • #8
                vielen Dank Freunde. Ihr habt mir wirklich geholfen. Danke nochmal

                Kommentar

                Vorherige template Weiter
                Lädt...
                X