Technology, Support, and News Forum

[iXclusiv Profile WebsiteICQYIM]

Hello,

here is a XHTML VALID BBCode Parser (php) and the Demo Textfield with smylies.

./js/main.js - JavaScript file for BBCode and Colortable

Code: Select all


  var idTextfeld    = 'nachricht';       // ID der <textarea>
  var idColorpicker = 'colorpicker';     // ID der Tabelle

  var rangeIE = null;

  function insertProperty(prop,val)
  {
    insertText('[' + prop + '=' + val + ']', '[\/' + prop + ']');
  }

  // IE/Gecko-Weiche zum Einfügen von Text ins Textfeld
  function insertText(vor, nach)
  {
     var textfeld = document.getElementById(idTextfeld);
     textfeld.focus();                                         // falls Cursor außerhalb war

     if(typeof document.selection != 'undefined')              // für IE, auch Opera
     {
       insertIE(textfeld, vor, nach);
     }
     else if (typeof textfeld.selectionStart != 'undefined')   // Geckos (FF)
     {
       insertGecko(textfeld, vor, nach);
     }
  }
 
    function insertTextQoute(vor, nach, ende)
  {
     var textfeld = document.getElementById(idTextfeld);
     textfeld.focus();                                         // falls Cursor außerhalb war

     if(typeof document.selection != 'undefined')              // für IE, auch Opera
     {
       insertIEQoute(textfeld, vor, nach, ende);
     }
     else if (typeof textfeld.selectionStart != 'undefined')   // Geckos (FF)
     {
       insertGeckoQoute(textfeld, vor, nach, ende);
     }
  }

  // Im "textfeld" Portionen "vor" und "nach" einfügen (IE)

    function insertGeckoQoute(textfeld, vor, nach, allesandere)
  {
     von = textfeld.selectionStart;
     bis = textfeld.selectionEnd;

     // Text zerlegen
     anfang = textfeld.value.slice(0,   von);
     mitte  = textfeld.value.slice(von, bis);
     ende   = textfeld.value.slice(bis);        // der Rest des Strings

     // BBC einfügen und ins Textfeld schreiben
     textfeld.value = anfang + vor + mitte + nach + ende + allesandere;

     // Cursor neu setzen
     if(bis - von == 0)
     {
       textfeld.selectionStart = von + vor.length;
       textfeld.selectionEnd   = textfeld.selectionStart;
     }
     else
     {
       textfeld.selectionEnd   = bis + vor.length + nach.length;
       textfeld.selectionStart = textfeld.selectionEnd;
     }
  }

    function insertIEQoute(textfeld, vor, nach, ende)
  {
     if(!rangeIE) rangeIE = document.selection.createRange();

     // nichts weiter tun, falls wir nicht im Textfeld sind
     if(rangeIE.parentElement().id != idTextfeld) { rangeIE = null; return; }

     var alterText = rangeIE.text;

     // Auswahl um BBC ergänzen
     rangeIE.text = vor + alterText + nach + ende;

     // Cursor neu setzen (wie SelfHTML)
     if (alterText.length == 0)
       rangeIE.move('character', -nach.length);
     else
       rangeIE.moveStart('character', rangeIE.text.length);
   
     rangeIE.select();
     rangeIE = null;
  }
 
  function insertIE(textfeld, vor, nach)
  {
     if(!rangeIE) rangeIE = document.selection.createRange();

     // nichts weiter tun, falls wir nicht im Textfeld sind
     if(rangeIE.parentElement().id != idTextfeld) { rangeIE = null; return; }

     var alterText = rangeIE.text;

     // Auswahl um BBC ergänzen
     rangeIE.text = vor + alterText + nach;

     // Cursor neu setzen (wie SelfHTML)
     if (alterText.length == 0)
       rangeIE.move('character', -nach.length);
     else
       rangeIE.moveStart('character', rangeIE.text.length);
   
     rangeIE.select();
     rangeIE = null;
  }

  // Im "textfeld" Portionen "vor" und "nach" einfügen (Geckos)
  function insertGecko(textfeld, vor, nach)
  {
     von = textfeld.selectionStart;
     bis = textfeld.selectionEnd;

     // Text zerlegen
     anfang = textfeld.value.slice(0,   von);
     mitte  = textfeld.value.slice(von, bis);
     ende   = textfeld.value.slice(bis);        // der Rest des Strings

     // BBC einfügen und ins Textfeld schreiben
     textfeld.value = anfang + vor + mitte + nach + ende;

     // Cursor neu setzen
     if(bis - von == 0)
     {
       textfeld.selectionStart = von + vor.length;
       textfeld.selectionEnd   = textfeld.selectionStart;
     }
     else
     {
       textfeld.selectionEnd   = bis + vor.length + nach.length;
       textfeld.selectionStart = textfeld.selectionEnd;
     }
  }

  // Im IE die Textauswahl merken (onMouseDown im Farbwähler)
  function getSelectionIE()
  {
    if (document.selection)
    {
      document.getElementById(idTextfeld).focus();
      rangeIE = document.selection.createRange();
    }
  }

  /* ========= Ab hier: Farbwähler =================================== */

  // Farbtabelle erzeugen und in Container-Div schreiben bzw. Tabelle löschen
 

function toHex(N) {
 if (N==null) return "00";
 N=parseInt(N); if (N==0 || isNaN(N)) return "00";
 N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
 return "0123456789ABCDEF".charAt((N-N%16)/16)
      + "0123456789ABCDEF".charAt(N%16);
}


function colorPalette(dir, width, height)
{
   var r = 0, g = 0, b = 0;
   var numberList = new Array(6);
   var color = '';

   numberList[0] = '00';
   numberList[1] = '40';
   numberList[2] = '80';
   numberList[3] = 'BF';
   numberList[4] = 'FF';

   document.writeln('<table cellspacing="1" cellpadding="0" border="0">');

   for (r = 0; r < 5; r++)
   {
      if (dir == 'h')
      {
         document.writeln('<tr>');
      }

      for (g = 0; g < 5; g++)
      {
         if (dir == 'v')
         {
            document.writeln('<tr>');
         }
         
         for (b = 0; b < 5; b++)
         {
            color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
            document.write('<td title=" HEX Farbe: #' + color + '" bgcolor="#' + color + '" style="width: ' + width + 'px; height: ' + height + 'px;" onclick="insertText(\'[color=' + color + ']\', \'[/color]\');">');
            document.writeln('</td>');
         }

         if (dir == 'v')
         {
            document.writeln('</tr>');
         }
      }

      if (dir == 'h')
      {
         document.writeln('</tr>');
      }
   }
   document.writeln('</table>');
}


./includes/parseBB.php - to parse the BBCodes

Code: Select all

<?php
/*
########################################################################
##            parseBB.php by Benjamin Hoffmann                        ##
##                                                                    ##
##                Version vFinal                                      ##
########################################################################
*/
function parseBBCode2HTML( $bb )
{

    // Textformatierungen (XHTML Valide)
    $bb = preg_replace('/\[b\](.*?)\[\/b\]/', '<strong>$1</strong>', $bb);
    $bb = preg_replace('/\[i\](.*?)\[\/i\]/', '<i>$1</i>', $bb);
    $bb = preg_replace('/\[u\](.*?)\[\/u\]/', '<u>$1</u>', $bb);
    $bb = preg_replace('/\[h1\](.*?)\[\/h1\]/', '<h1>$1</h1>', $bb);
    $bb = preg_replace('/\[h2\](.*?)\[\/h2\]/', '<h2>$1</h2>', $bb);
    $bb = preg_replace('/\[hr\]/', '<hr />', $bb);
   
    //Weitere Textformatierungen (größe usw...) (XHTML Valide)
    $bb = preg_replace('/\[color=([[:alnum:]]{6}?).*\](.*?)\[\/color\]/', '<span style="color: #$1;">$2</span>', $bb);
    $bb = preg_replace('/\[size=(.*?)\](.*?)\[\/size\]/', '<span style="font-size: $1px;">$2</span>', $bb);
    $bb = preg_replace('/\[align=(.*?)](.*?)\[\/align\]/', '<div align="$1">$2</div>', $bb);
   
    //Qoute und listeneinträge (XHTML Valide bis auf List und [*] leider...)
   
    $zitat = "
    <fieldset style=\"background-color: #aaa1a1; color: #000000; border: 1px solid; border-color: #000000;\">
    Quote from &quot;\\1&quot;:<br />
    <code>\\2</code>
    </fieldset>
    ";
                                                                         
    while(eregi("\[quote=(.*)\](.*)\[\/quote\]",$bb)) $bb = preg_replace("/\[quote=(.*?)\](.*?)\[\/quote\]/si", $zitat, $bb);
   
   
    $bb = preg_replace("/\[list\](.*?)\[\/list\]/si", "<ul>\\1</ul>", $bb);
    $bb = preg_replace("/\[listitem\](.*?)\[\/listitem\]/si", "<li>\\1</li>", $bb); 
   
   
   
    //$bb = preg_replace("/\[\*\](.*?)/", "<li>\\1</li>", $bb);
   
    //Mediadaten (url, image, youtube video) (XHTML Valide)                                                                                                                                             
    $bb = preg_replace('/\[url=([^ ]+).*\](.*)\[\/url\]/', '<a href="$1" target="_blank">$2</a>', $bb);
    $bb = preg_replace('/\[img]([^ ]+)(.*)\[\/img\]/', '<img src="$1" width="425" height="350" alt="[Dieses Bild kann nicht angezeigt werden, falsche URL oder die Datei wurde gel&ouml;scht.]" />', $bb);
    $bb = preg_replace('/\[video]([^ ]+)(.*)\[\/video\]/', '<center><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/$1"></param><embed src="http://www.youtube.com/v/$1" type="application/x-shockwave-flash" width="425" height="350"></embed></object></center>', $bb);

    //Zeilenumbruch (XHTML Valide)
    $bb = preg_replace('/\n/', "<br />", $bb);
   
    //Smylies (XHTML Valide)
    $bb = str_replace(':lol:', "<img src=\"./smylies/icon_lol.gif\" alt=\":lol:\" title=\"Laut Lachen (lol)\" border=\"0\" />", $bb);
    $bb = str_replace(':boese:', "<img src=\"./smylies/boese.gif\" alt=\":boese:\" title=\"Anschnauzen\" border=\"0\" />", $bb);
    $bb = str_replace(':thumbsup:', "<img src=\"./smylies/daumen_hoch.gif\" alt=\":thumbsup:\" title=\"Daumen hoch!\" border=\"0\" />", $bb);
    $bb = str_replace(':arrow:', "<img src=\"./smylies/icon_arrow.gif\" alt=\":arrow:\" title=\"Pfeil nach links\" border=\"0\" />", $bb);
    $bb = str_replace(':D', "<img src=\"./smylies/icon_biggrin.gif\" alt=\":D\" title=\":D\" border=\"0\" />", $bb);
    $bb = str_replace(':confused:', "<img src=\"./smylies/icon_confused.gif\" alt=\":confused:\" title=\"Verwirrt\" border=\"0\" />", $bb);
    $bb = str_replace('8)', "<img src=\"./smylies/icon_cool.gif\" alt=\"8)\" title=\"8)\" border=\"0\" />", $bb);
    $bb = str_replace(':cry:', "<img src=\"./smylies/icon_cry.gif\" alt=\":cry:\" title=\"Weinen\" border=\"0\" />", $bb);
    $bb = str_replace(':oO:', "<img src=\"./smylies/icon_eek.gif\" alt=\":oO:\" title=\"oO\" border=\"0\" />", $bb);
    $bb = str_replace(':evil:', "<img src=\"./smylies/icon_evil.gif\" alt=\":evil:\" title=\"Ver&auml;rgert\" border=\"0\" />", $bb);
    $bb = str_replace(':!:', "<img src=\"./smylies/icon_exclaim.gif\" alt=\":!:\" title=\"!\" border=\"0\" />", $bb);
    $bb = str_replace(':idea:', "<img src=\"./smylies/icon_idea.gif\" alt=\":idea:\" title=\"Hab ne idee!\" border=\"0\" />", $bb);
    $bb = str_replace(':@', "<img src=\"./smylies/icon_mad.gif\" alt=\":@\" title=\"Verdammt ver&auml;rgert sein\" border=\"0\" />", $bb);
    $bb = str_replace(':mrgreen:', "<img src=\"./smylies/icon_mrgreen.gif\" alt=\":mrgreen:\" title=\"Mr. green\" border=\"0\" />", $bb);
    $bb = str_replace(':|', "<img src=\"./smylies/icon_neutral.gif\" alt=\":|\" title=\"Neutral\" border=\"0\" />", $bb);
    $bb = str_replace(':?:', "<img src=\"./smylies/icon_question.gif\" alt=\":?:\" title=\"Fragezeichen\" border=\"0\" />", $bb);
    $bb = str_replace(':P', "<img src=\"./smylies/icon_razz.gif\" alt=\":P\" title=\"Zunge rausstrecken\" border=\"0\" />", $bb);
    $bb = str_replace(':oops:', "<img src=\"./smylies/icon_redface.gif\" alt=\":oops:\" title=\"Oops\" border=\"0\" />", $bb);
    $bb = str_replace(':rolleyes:', "<img src=\"./smylies/icon_rolleyes.gif\" alt=\":rolleyes:\" title=\"Rolleyes\" border=\"0\" />", $bb);
    $bb = str_replace(':(', "<img src=\"./smylies/icon_sad.gif\" alt=\":(\" title=\"Traurig\" border=\"0\" />", $bb);
    $bb = str_replace(':)', "<img src=\"./smylies/icon_smile.gif\" alt=\":)\" title=\"Smile\" border=\"0\" />", $bb);
    $bb = str_replace(':O', "<img src=\"./smylies/icon_surprised.gif\" alt=\":O\" title=\"&Uuml;berrascht\" border=\"0\" />", $bb);
    $bb = str_replace(':twisted:', "<img src=\"./smylies/icon_twisted.gif\" alt=\":twisted:\" title=\"Verry Evil\" border=\"0\" />", $bb);
    $bb = str_replace(';)', "<img src=\"./smylies/icon_wink.gif\" alt=\";)\" title=\"Zwinker\" border=\"0\" />", $bb);

    return $bb;

}
?>


main.css - Stylesheet for the textfield

Code: Select all

.farben {
margin: auto;
cursor:pointer;
height:56px;
padding:3px;
}
  #cpcontainer { height:56px; padding:3px; }

  #colorpicker       { border:2px ridge #dddddd; margin:auto; }
  #colorpicker td  { width:10px; height:10px; cursor:pointer; }
  #colorpicker td:hover  { width:8px; border:1px solid white; }
 
  #beitrag
  { width:650px;
    overflow:visible;
    padding:5px;
    background:#f8f8f8;
    position:relative;
  }
  #beitrag button
  { padding:1px 4px;
    background:url(button_grau.jpg) 0px center;
    border:1px solid #aaaaaa;
    cursor:pointer;
  }
  #beitrag select        { margin:0px 3px; }
  #beitrag textarea      { display:block; margin:5px auto; width:100%; }
  #beitrag div.center    { text-align:center; }
  #beitrag img           { border:none; }
  #beitrag #buttonleiste { white-space:nowrap; }
  #beitrag #smilies      { position:absolute; right:5px; }

  /* Speziell für den IE < 7 */
  * html #beitrag #schriftbutton { width:10em; }
  * html #beitrag button     { margin:0px 1px; }
  * html #beitrag select  { margin-bottom:0px; }


index.php- The file where we can test everything

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Textfield with BBCODE Parser</title>
<link href="./main.css" rel="stylesheet" type="text/css" />
<script src="./js/main.js" type="text/javascript"></script>
</head>
<?php
require_once("./includes/parseBB.php");
?>
<form action="index.php" method="post" name="beitrag" id="beitrag">

<div class="farben" style="display: block;">
   <dl style="clear: right;">

      <script type="text/javascript">
      // <![CDATA[
         function change_palette()
         {
            dE('colour_palette');
            e = document.getElementById('colour_palette');
            
            if (e.style.display == 'block')
            {
               document.getElementById('bbpalette').value = 'Textfarbe';
            }
            else
            {
               document.getElementById('bbpalette').value = 'Textfarbe';
            }
         }

         colorPalette('h', 15, 10);
      // ]]>
      </script>
</div>
  <div id="smilies">
    <img src="./smylies/icon_lol.gif" onclick="insertText(' :lol: ','')" alt=":lol:" title="Laut Lachen (lol)" border="0" />
    <img src="./smylies/boese.gif" onclick="insertText(' :boese: ','')" alt=":boese:" title="Anschnauzen" border="0" />
    <img src="./smylies/daumen_hoch.gif" onclick="insertText(' :thumbsup: ','')" alt=":thumbsup:" title="Daumen hoch!" border="0" />
    <img src="./smylies/icon_arrow.gif" onclick="insertText(' :arrow: ','')" alt=":arrow:" title="Pfeil nach links" border="0" />
    <img src="./smylies/icon_biggrin.gif" onclick="insertText(' :D ','')" alt=":D" title=":D" border="0" />
    <img src="./smylies/icon_confused.gif" onclick="insertText(' :confused: ','')" alt=":confused:" title="Verwirrt" border="0" />
    <br />
    <img src="./smylies/icon_cool.gif" onclick="insertText(' 8) ','')" alt="8)" title="8)" border="0" />
    <img src="./smylies/icon_cry.gif" onclick="insertText(' :cry: ','')" alt=":cry:" title="Weinen" border="0" />
    <img src="./smylies/icon_eek.gif" onclick="insertText(' :oO: ','')" alt=":oO:" title="oO" border="0" />
    <img src="./smylies/icon_evil.gif" onclick="insertText(' :evil: ','')" alt=":evil:" title="Ver&auml;rgert" border="0" />
    <img src="./smylies/icon_exclaim.gif" onclick="insertText(' :!: ','')" alt=":!:" title="!" border="0" />
    <img src="./smylies/icon_idea.gif" onclick="insertText(' :idea: ','')" alt=":idea:" title="Hab ne idee!" border="0" />
    <img src="./smylies/icon_mad.gif" onclick="insertText(' :@ ','')" alt=":@" title="Verdammt ver&auml;rgert sein" border="0" />
    <img src="./smylies/icon_mrgreen.gif" onclick="insertText(' :mrgreen: ','')" alt=":mrgreen:" title="Mr. green" border="0" />
    <img src="./smylies/icon_neutral.gif" onclick="insertText(' :| ','')" alt=":|" title="Neutral" border="0" />
    <br />
    <img src="./smylies/icon_question.gif" onclick="insertText(' :?: ','')" alt=":?:" title="Fragezeichen" border="0" />
    <img src="./smylies/icon_razz.gif" onclick="insertText(' :P ','')" alt=":P" title="Zunge rausstrecken" border="0" />
    <img src="./smylies/icon_redface.gif" onclick="insertText(' :oops: ','')" alt=":oops:" title="Oops" border="0" />
    <img src="./smylies/icon_rolleyes.gif" onclick="insertText(' :rolleyes: ','')" alt=":rolleyes:" title="Rolleyes" border="0" />
    <img src="./smylies/icon_sad.gif" onclick="insertText(' :( ','')" alt=":(" title="Traurig" border="0" />
    <img src="./smylies/icon_smile.gif" onclick="insertText(' :) ','')" alt=":)" title="Smile" border="0" />
    <img src="./smylies/icon_surprised.gif" onclick="insertText(' :O ','')" alt=":O" title="&Uml;berrascht" border="0" />
    <img src="./smylies/icon_twisted.gif" onclick="insertText(' :twisted: ','')" alt=":twisted:" title="Verry Evil" border="0" />
    <img src="./smylies/icon_wink.gif" onclick="insertText(' ;) ','')" alt=";)" title="Zwinker" border="0" />
  </div>

  <div id="cpcontainer"></div>

  <div id="buttonleiste">
    <button type="button" onclick="insertText('[b]','[/b]')" title="[b]text[/b]"><strong>b</strong></button>
    <button type="button" onclick="insertText('[i]','[/i]')" title="[i]text[/i]"><i>i</i></button>
    <button type="button" onclick="insertText('[u]','[/u]')" title="[u]text[/u]"><u>u</u></button>
    <button type="button" onclick="insertText('[h1]','[/h1]')" title="[h1]text[/h1] | Headline 1">h1</button>
    <button type="button" onclick="insertText('[h2]','[/h2]')" title="[h2]text[/h2] | Headline 2">h2</button>
    <button type="button" onclick="insertText('[quote=Name]','[/quote]')" title="[quote=Name]text[/quote]">quote</button>
    <button type="button" onclick="insertText('[list]','[/list]')" title="Creates a list">list</button>
    <button type="button" onclick="insertText('[listitem]','[/listitem]')" title="[listitem]Listitem[/listitem]">[*]</button>
    <button type="button" onclick="insertText('[img]','[/img]')" title="[img]URL[/img]">img</button>
    <button type="button" onclick="insertText('[video]','[/video]')" title="[video]YouTube Video ID[/video] | Beispiel; [video]hsgZC75[/video]">YouTube</button>
    <button type="button" onclick="insertText('[url=]','[/url]')" title="[url=LINK]Description[/url]">url</button>



    <select size="1" onchange="insertProperty('size',this.value); this.selectedIndex=0;">
      <option value="" title="">Size</option>
      <option value="10" title="[size=10][/size]">normal</option>
      <option value="8" title="[size=8][/size]">small</option>
      <option value="12" title="[size=12][/size]">big</option>
    </select>
   
    <select size="1" onchange="insertProperty('align',this.value); this.selectedIndex=0;">
      <option value="" title="">Align</option>
      <option value="left" title="Left">Left</option>
      <option value="center" title="Center">Center</option>
      <option value="right" title="Right">Right</option>
    </select>
  </div>  <!-- #buttonleiste -->
<br />
</div>
<br />
  <textarea cols="70" rows="14" name="nachricht" id="nachricht"></textarea>
  <div class="center">
    <input type="submit" name="submit" id="absenden" value="Test it!" />
  </div>

</form>
<?php

if($_POST)
{
echo "<br /><br /><br />";
echo parseBBCode2HTML($_POST['nachricht']);
}

?>
</body>
</html>


STRUCTURE:

• main.css
• /js/main.js
• ./smylies/<images>
• index.php
• ./includes/parseBB.php

Smylies:

smylies.zip

The smylies

(11.31 KiB) Downloaded 562 times

Complete Package:

completepackage.zip

The Complete Package

(27.23 KiB) Downloaded 526 times

Test it and have fun. Thanks for useing.

Benny