Ergebnis 1 bis 8 von 8

Thema: BBCode in Textarea

  1. #1
    Samurai
    Registriert seit
    30.09.2007
    Beiträge
    229
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard BBCode in Textarea

    Ich suche jetzt schon 3 Stunden nach einem Script um BBCode in einer Textarea verwenden zu können.
    Dabei will ich kein fertiges Forum oder ein ganzes CMS-System, sondern nur ein paar Button, mit denen der User seinen eingegebene Text formatieren kann, ähnlich wie hier, wenn man eine neue Nachricht schreibt.

    Dabei muss das aber längst nicht so umfangreich sein:
    [B] [I] [U] [BR] und [URL] die Schriftfarbe und die Größe würden schon völlig ausreichen.

    Smilies wären noch ganz nett, sind aber nicht umbedingt gefordert.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

  2. #2
    Meister(in)
    Registriert seit
    20.05.2005
    Ort
    Rheinland-Pfalz
    Beiträge
    275
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Naja, das müsste sich doch ganz leicht über ne array realisieren lassen. Allerdings weis ich nicht obs dafür vielleicht sgar eine eigene "Sprache" gibt. Wenn ja korrigiere mich bitte einer.

    Code:
    <?
    $text = "xyz";//Die Variable für den Text
    //hier die BBDodes einfügen
    $ersetzen = array&#40;"&#91;b&#93;","&#91;/b&#93;","&#91;i&#93;", ....... &#41;;
    $ersatz = array&#40;"","","[i]", ........ &#41;;
    if&#40;count&#40;$ersetzen&#41;==count&#40;$ersatz&#41;&#41;&#123;
    $count = count&#40;$ersatz&#41;;
    for&#40;$i = 0 ; $i < count&#40;$count&#41; ; $i++&#41;
    $text = eregi_replace&#40;$ersetzen&#91;$i&#93;,$ersatz&#91;$i&#93;,$text&#41;;
    &#125;
    echo $text;
    ?>
    Die array kann man natürlich jetzt auch durch Datenbankenträge auslesen lassen. Bei der Array selbst ist noch zu beachten, das die listenzahl des zu ersetzenden textes die selbe ist wie der text der ersetzt werden soll.

    Gruß, Heirnich Sandmeyer

  3. #3
    Samurai
    Themenstarter

    Registriert seit
    30.09.2007
    Beiträge
    229
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Erstmal schöne Dank Heinrich (Heirnich ist wohl eher nicht zutreffend ), aber das hilft mir erst bei der Auswertung der Textarea.

    Mit einem Script von Selfhtml habe ich jetzt schon mal ein bißchen was erreicht. Die Schaltflächen rechts funktionieren schon wie gewünscht, aber die Schriftgröße, das Auswahlfeld oben drüber, funktioniert nicht wie erwartet. Ich habe es auch schon mit <select name="size" onchange="insert('[font-size=\"size\"]', '[/font]')"> versucht, aber irgentwie bekomme ich das nicht hin.

    Hier mal der Code bisher
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http&#58;//www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Einf&uuml;gen von Inhalten in eine Textarea</title>
    <style type="text/css">
    <!--
    
    input &#123;
    border-style&#58; outset;
    border-width&#58; 1px;
    border-color&#58; blue;
    background-color&#58; navy;
    color&#58; white;
    font-family&#58; Helvetica, Verdana, Arial, sans-serif;
    font-size&#58; 11pt;
    width&#58; 100px;
    &#125;
    input.b &#123;font-weight&#58; bold;&#125;
    input.i &#123;font-style&#58; italic;&#125;
    input.u &#123;text-decoration&#58; underline;&#125;
    -->
    </style>
    <script type="text/javascript">
    <!--
    function insert&#40;aTag, eTag&#41; &#123;
      var input = document.forms&#91;'formular'&#93;.elements&#91;'eingabe'&#93;;
      input.focus&#40;&#41;;
      /* für Internet Explorer */
      if&#40;typeof document.selection != 'undefined'&#41; &#123;
        /* Einfügen des Formatierungscodes */
        var range = document.selection.createRange&#40;&#41;;
        var insText = range.text;
        range.text = aTag + insText + eTag;
        /* Anpassen der Cursorposition */
        range = document.selection.createRange&#40;&#41;;
        if &#40;insText.length == 0&#41; &#123;
          range.move&#40;'character', -eTag.length&#41;;
        &#125; else &#123;
          range.moveStart&#40;'character', aTag.length + insText.length + eTag.length&#41;;      
        &#125;
        range.select&#40;&#41;;
      &#125;
      /* für neuere auf Gecko basierende Browser */
      else if&#40;typeof input.selectionStart != 'undefined'&#41;
      &#123;
        /* Einfügen des Formatierungscodes */
        var start = input.selectionStart;
        var end = input.selectionEnd;
        var insText = input.value.substring&#40;start, end&#41;;
        input.value = input.value.substr&#40;0, start&#41; + aTag + insText + eTag + input.value.substr&#40;end&#41;;
        /* Anpassen der Cursorposition */
        var pos;
        if &#40;insText.length == 0&#41; &#123;
          pos = start + aTag.length;
        &#125; else &#123;
          pos = start + aTag.length + insText.length + eTag.length;
        &#125;
        input.selectionStart = pos;
        input.selectionEnd = pos;
      &#125;
      /* für die übrigen Browser */
      else
      &#123;
        /* Abfrage der Einfügeposition */
        var pos;
        var re = new RegExp&#40;'^&#91;0-9&#93;&#123;0,3&#125;$'&#41;;
        while&#40;!re.test&#40;pos&#41;&#41; &#123;
          pos = prompt&#40;"Einfügen an Position &#40;0.." + input.value.length + "&#41;&#58;", "0"&#41;;
        &#125;
        if&#40;pos > input.value.length&#41; &#123;
          pos = input.value.length;
        &#125;
        /* Einfügen des Formatierungscodes */
        var insText = prompt&#40;"Bitte geben Sie den zu formatierenden Text ein&#58;"&#41;;
        input.value = input.value.substr&#40;0, pos&#41; + aTag + insText + eTag + input.value.substr&#40;pos&#41;;
      &#125;
    &#125;
    //-->
    </script>
    </head>
    <body>
      <h1>Demo&#58; Einf&uuml;gen von Inhalten in eine Textarea</h1>
      
    
    Positionieren Sie einfach den Cursor innerhalb der textarea oder markieren Sie Text darin.
         W&auml;hlen Sie dann "Einf&uuml;gen", um <code>&#91;link&#93;...&#91;/link&#93;</code> an dieser Stelle
         einf&uuml;gen zu lassen, sofern es der Browser erm&ouml;glicht.</p>
      <form name="formular" action="">
    	<table width="80%" align="center" border="1">
    	<tr>
    	<td>
    	<select name="size">
    	<option onfocus="insert&#40;'&#91;font-size=8&#93;', '&#91;/font&#93;'&#41;">8</option>
    	<option onfocus="insert&#40;'&#91;font-size=10&#93;', '&#91;/font&#93;'&#41;">10</option>
    	<option selected="selected">12</option>
    	<option onfocus="insert&#40;'&#91;font-size=14&#93;', '&#91;/font&#93;'&#41;">14</option>
    	<option onfocus="insert&#40;'&#91;font-size=16&#93;', '&#91;/font&#93;'&#41;">16</option>
    	<option onfocus="insert&#40;'&#91;font-size=18&#93;', '&#91;/font&#93;'&#41;">18</option>
    	<option onfocus="insert&#40;'&#91;font-size=20&#93;', '&#91;/font&#93;'&#41;">20</option>
    	<option onfocus="insert&#40;'&#91;font-size=22&#93;', '&#91;/font&#93;'&#41;">22</option>
    	<option onfocus="insert&#40;'&#91;font-size=24&#93;', '&#91;/font&#93;'&#41;">24</option>
    	</select>
    	</td>
    	<td></td>
    	</tr>
    	<tr>
    	<td width="50%">
    	<textarea name="eingabe" cols="30" rows="10">Ihre Nachricht</textarea>
    	</td>
        	<td width="50%">
    	<input type="button" value="Link" onClick="insert&#40;'&#91;link&#93;', '&#91;/link&#93;'&#41;">
    
        	<input type="button" value="Fett" class="b" onClick="insert&#40;'&#91;b&#93;', '&#91;/b&#93;'&#41;">
    
    	<input type="button" value="Kursiv" class="i" onClick="insert&#40;'&#91;i&#93;', '&#91;/i&#93;'&#41;">
    
        	<input type="button" value="Unterstrichen" class="u" onClick="insert&#40;'&#91;u&#93;', '&#91;/u&#93;'&#41;">
    
    	<input type="button" value="Zeilenende" onClick="insert&#40;'&#91;br&#93;', ''&#41;">
    
        	
    	</td>
    	</tr>
    	</table>
      </form>
    </body>
    </html>
    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

  4. #4
    phpfan
    Gast

    Standard

    Sieh' doch einfach mal in dem Quellcode vom phpBB nach, das ganze JavaScript-Zeug steckt im HTML-Code.

  5. #5
    Samurai
    Themenstarter

    Registriert seit
    30.09.2007
    Beiträge
    229
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Also da steige ich überhaupt nicht durch.

    Ich glaub, dann würde ich eher einen Button für jede Größe und Farbe anlegen, obwohl das Sch... aussehen würde, zumindest bei der Schriftgröße.
    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

  6. #6
    Meister(in)
    Registriert seit
    20.05.2005
    Ort
    Rheinland-Pfalz
    Beiträge
    275
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    [quote="Dikra"]Erstmal schöne Dank Heinrich (Heirnich ist wohl eher nicht zutreffend ), aber das hilft mir erst bei der Auswertung der Textarea.[quote]

    Ich dachte mir schon dass ich mal wieder alles falsch verstehe xD

    Grüße Heinrich

  7. #7
    virtualmarctek
    Gast

    Standard Geht nicht

    Also ich habe mal den Quelltext von oben is den head eingefügt:
    Code:
    <head>
    <script type="text/javascript">
    <!--
    function insert&#40;aTag, eTag&#41; &#123;
      var input = document.forms&#91;'formular'&#93;.elements&#91;'eingabe'&#93;;
      input.focus&#40;&#41;;
      /* für Internet Explorer */
      if&#40;typeof document.selection != 'undefined'&#41; &#123;
        /* Einfügen des Formatierungscodes */
        var range = document.selection.createRange&#40;&#41;;
        var insText = range.text;
        range.text = aTag + insText + eTag;
        /* Anpassen der Cursorposition */
        range = document.selection.createRange&#40;&#41;;
        if &#40;insText.length == 0&#41; &#123;
          range.move&#40;'character', -eTag.length&#41;;
        &#125; else &#123;
          range.moveStart&#40;'character', aTag.length + insText.length + eTag.length&#41;;     
        &#125;
        range.select&#40;&#41;;
      &#125;
      /* für neuere auf Gecko basierende Browser */
      else if&#40;typeof input.selectionStart != 'undefined'&#41;
      &#123;
        /* Einfügen des Formatierungscodes */
        var start = input.selectionStart;
        var end = input.selectionEnd;
        var insText = input.value.substring&#40;start, end&#41;;
        input.value = input.value.substr&#40;0, start&#41; + aTag + insText + eTag + input.value.substr&#40;end&#41;;
        /* Anpassen der Cursorposition */
        var pos;
        if &#40;insText.length == 0&#41; &#123;
          pos = start + aTag.length;
        &#125; else &#123;
          pos = start + aTag.length + insText.length + eTag.length;
        &#125;
        input.selectionStart = pos;
        input.selectionEnd = pos;
      &#125;
      /* für die übrigen Browser */
      else
      &#123;
        /* Abfrage der Einfügeposition */
        var pos;
        var re = new RegExp&#40;'^&#91;0-9&#93;&#123;0,3&#125;$'&#41;;
        while&#40;!re.test&#40;pos&#41;&#41; &#123;
          pos = prompt&#40;"Einfügen an Position &#40;0.." + input.value.length + "&#41;&#58;", "0"&#41;;
        &#125;
        if&#40;pos > input.value.length&#41; &#123;
          pos = input.value.length;
        &#125;
        /* Einfügen des Formatierungscodes */
        var insText = prompt&#40;"Bitte geben Sie den zu formatierenden Text ein&#58;"&#41;;
        input.value = input.value.substr&#40;0, pos&#41; + aTag + insText + eTag + input.value.substr&#40;pos&#41;;
      &#125;
    &#125;
    //-->
    </script> 
    	</head>
    und dann habe ich das im Body:
    Code:
    echo "<form method='post' action='edit_content2.php'>
    				<input name='id' id='id' type='hidden' value='$_GET&#91;id&#93;'>
    
            <label>Titel&#58; </label><input name='titel' type='text' id='titel' value='$titel'> 
    "; ?>
            <input type="button" value="Fett" class="b" onClick="insert&#40;'&#91;b&#93;', '&#91;/b&#93;'&#41;">
    
            <? echo "<label>Inhalt&#58; </label><textarea name='inhalt' id='inhalt' cols='50' rows='60'>$text</textarea>
    
            <input name='edit' type='submit' id='edit' value='Inhalt bearbeiten'>
        </form>";
    Aber es geht nicht, was muss ich machen, damit es geht?

  8. #8
    Ralf_Wedmann
    Gast

    Standard

    Ich hätte auch noch einen Vorschlage:
    Code:
    <script language="JavaScript">
    function set&#40;w,t&#41;&#123;
    w.NAME_DES_TEXTAREAS.value += t;
    w.NAME_DES_TEXTAREAS.focus&#40;&#41;;
    &#125;
    </script>
    für das einfügen... Das macht man dann vial Button:
    Code:
    <input type="button" onMouseDown="set&#40;this.form,'&#91;b&#93;&#91;/b&#93;'&#41;;" value="B">
    und die BBCodes, mein kleines Script:
    Code:
     function bbCode&#40;$input&#41; &#123;
       
          $bbcodes = array&#40;
          "|\&#91;b\&#93;&#40;.*&#41;\&#91;/b\&#93;|smUi" => "\\1",
    	  "|\&#91;i\&#93;&#40;.*&#41;\&#91;/i\&#93;|smUi" => "\\1",
          "|\&#91;u\&#93;&#40;.*&#41;\&#91;/u\&#93;|smUi" => "<u>\\1</u>",
    	  "|\&#58;smile&#58;|smUi" => "<img src=\"img/laugh.gif\">",
    	  "|\&#58;sad&#58;|smUi" => "<img src=\"img/sad.gif\">",
    	  "|\&#58;wink&#58;|smUi" => "<img src=\"img/wink.gif\">",
          "|\&#91;url=&#40;.*&#41;\&#93;&#40;.*&#41;\&#91;/url\&#93;|smUi" => "<a href=\"http&#58;//\\1\" target=\"_blank\">\\2</a>",
          "|\&#91;url\&#93;&#40;.*&#41;\&#91;/url\&#93;|smUi" => "<a href=\"http&#58;//\\1\" target=\"_blank\">\\1</a>"&#41;;
    
    
          foreach&#40;$bbcodes as $key=>$value&#41;
             $input = preg_replace&#40;$key,$value,$input&#41;;
    
          return stripslashes&#40;$input&#41;;
    
       &#125;
    Anstatt "echo" nimmt man einfach "print bbCode"

Ähnliche Themen

  1. BBCode auswertung
    Von virtualmarctek im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 01.06.2008, 16:09
  2. BBCode in Textarea
    Von Dikra im Forum Script-Archiv
    Antworten: 0
    Letzter Beitrag: 21.11.2007, 17:18
  3. im Rapidforum BBcode freischalten
    Von im Forum Tutorials, Workshops und Anleitungen
    Antworten: 1
    Letzter Beitrag: 17.10.2007, 21:49
  4. BBCode Klasse
    Von No0ob im Forum Script-Archiv
    Antworten: 0
    Letzter Beitrag: 05.08.2006, 21:52
  5. BBCODE
    Von WWKiller im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.05.2006, 21:37

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •