BBCode in Textarea

Dikra

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.

yngvar

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("[b]","[/b]","[i]", ....... );
$ersatz = array("[b]","[/b]","[i]", ........ );
if(count($ersetzen)==count($ersatz)){
$count = count($ersatz);
for($i = 0 ; $i < count($count) ; $i++)
$text = eregi_replace($ersetzen[$i],$ersatz[$i],$text);
}
echo $text;
?>

Alles anzeigen

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

Dikra

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://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 {
border-style: outset;
border-width: 1px;
border-color: blue;
background-color: navy;
color: white;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 11pt;
width: 100px;
}
input.b {font-weight: bold;}
input.i {font-style: italic;}
input.u {text-decoration: underline;}
-->
</style>
<script type="text/javascript">
<!--
function insert(aTag, eTag) {
  var input = document.forms['formular'].elements['eingabe'];
  input.focus();
  /* für Internet Explorer */
  if(typeof document.selection != 'undefined') {
    /* Einfügen des Formatierungscodes */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);      
    }
    range.select();
  }
  /* für neuere auf Gecko basierende Browser */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Einfügen des Formatierungscodes */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* für die übrigen Browser */
  else
  {
    /* Abfrage der Einfügeposition */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Einfügen des Formatierungscodes */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}
//-->
</script>
</head>
<body>
  <h1>Demo: 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>[link]...[/link]</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('[font-size=8]', '[/font]')">8</option>
	<option onfocus="insert('[font-size=10]', '[/font]')">10</option>
	<option selected="selected">12</option>
	<option onfocus="insert('[font-size=14]', '[/font]')">14</option>
	<option onfocus="insert('[font-size=16]', '[/font]')">16</option>
	<option onfocus="insert('[font-size=18]', '[/font]')">18</option>
	<option onfocus="insert('[font-size=20]', '[/font]')">20</option>
	<option onfocus="insert('[font-size=22]', '[/font]')">22</option>
	<option onfocus="insert('[font-size=24]', '[/font]')">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('[link]', '[/link]')">


    	<input type="button" value="Fett" class="b" onClick="insert('[b]', '[/b]')">


	<input type="button" value="Kursiv" class="i" onClick="insert('[i]', '[/i]')">


    	<input type="button" value="Unterstrichen" class="u" onClick="insert('[u]', '[/u]')">


	<input type="button" value="Zeilenende" onClick="insert('[br]', '')">


    	
	</td>
	</tr>
	</table>
  </form>
</body>
</html>

Alles anzeigen

phpfan

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

Dikra

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.

yngvar

[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

virtualmarctek

Also ich habe mal den Quelltext von oben is den head eingefügt:

Code

<head>
<script type="text/javascript">
<!--
function insert(aTag, eTag) {
  var input = document.forms['formular'].elements['eingabe'];
  input.focus();
  /* für Internet Explorer */
  if(typeof document.selection != 'undefined') {
    /* Einfügen des Formatierungscodes */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);     
    }
    range.select();
  }
  /* für neuere auf Gecko basierende Browser */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Einfügen des Formatierungscodes */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* für die übrigen Browser */
  else
  {
    /* Abfrage der Einfügeposition */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Einfügen des Formatierungscodes */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}
//-->
</script> 
	</head>

Alles anzeigen

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[id]'>


        <label>Titel: </label><input name='titel' type='text' id='titel' value='$titel'> 
"; ?>
        <input type="button" value="Fett" class="b" onClick="insert('[b]', '[/b]')">


        <? echo "<label>Inhalt: </label><textarea name='inhalt' id='inhalt' cols='50' rows='60'>$text</textarea>


        <input name='edit' type='submit' id='edit' value='Inhalt bearbeiten'>
    </form>";

Alles anzeigen

Aber es geht nicht, was muss ich machen, damit es geht?

Ralf_Wedmann

Ich hätte auch noch einen Vorschlage:

Code

<script language="JavaScript">
function set(w,t){
w.NAME_DES_TEXTAREAS.value += t;
w.NAME_DES_TEXTAREAS.focus();
}
</script>

für das einfügen... Das macht man dann vial Button:

Code

<input type="button" onMouseDown="set(this.form,'[b][/b]');" value="B">

und die BBCodes, mein kleines Script:

Code

function bbCode($input) {

      $bbcodes = array(
      "|\[b\](.*)\[/b\]|smUi" => "[b]\\1[/b]",
	  "|\[i\](.*)\[/i\]|smUi" => "[i]\\1[/i]",
      "|\[u\](.*)\[/u\]|smUi" => "<u>\\1</u>",
	  "|\:smile:|smUi" => "<img src=\"img/laugh.gif\">",
	  "|\:sad:|smUi" => "<img src=\"img/sad.gif\">",
	  "|\:wink:|smUi" => "<img src=\"img/wink.gif\">",
      "|\[url=(.*)\](.*)\[/url\]|smUi" => "<a href=\"http://\\1\" target=\"_blank\">\\2</a>",
      "|\[url\](.*)\[/url\]|smUi" => "<a href=\"http://\\1\" target=\"_blank\">\\1</a>");




      foreach($bbcodes as $key=>$value)
         $input = preg_replace($key,$value,$input);


      return stripslashes($input);


   }

Alles anzeigen

Anstatt "echo" nimmt man einfach "print bbCode"

BBCode in Textarea

Tags

Benutzer online in diesem Thema