[XHTML Valid]: BBCode+Textfield+Smylies
From advanced to novice... come, join in, teach, and learn. Web programming and help. We have stuff on it all: php, html, asp, asp.net, etc. Share your coding expertise too.

Moderators: Forum Experts, Management

Post a reply

[XHTML Valid]: BBCode+Textfield+Smylies

Postby iXclusiv on Sat Sep 12, 2009 1:26 pm

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 75 times


Complete Package:
completepackage.zip
The Complete Package
(27.23 KiB) Downloaded 43 times



Test it and have fun. Thanks for useing.

Benny
Die deutsche Rechtschreibung ist Freeware, sprich, man darf sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, das heißt du darfst sie nicht verändern oder in veränderter Form veröffentlichen.

The German spelling is freeware, in other words, we must use them for free.
However, it is not open source, which means you can not touch them or publish in altered form.
User avatar
iXclusiv
PRO Level 2
PRO Level 2
 
Posts: 12
Joined: Thu Apr 16, 2009 3:22 pm
Location: Germany
Real Name: Benjamin Hoffmann
Top
Post a reply

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: No registered users and 0 guests

cron
PROnetworks - Technology News, Analysis, and Support