BBCode-Leiste

ich such so eine leiste wie hier im forum für meine website (fürs GB, News, etc…).
weiß jemand wo ich sowas herbekomme? will das nicht unbedingt neu erfinden müssen…
danke!

Hmm…
:unamused:
haste schon gegooglet?
oder die Bordsuche verwendet?
(wenn nicht schnell nachholen :wink: )
wenn du da nichts findest könnte ich dir sonst nachher meine bbcode-leiste geben…
(muss sie allerdings noch bei mir selbst zum laufen bringen, bevor ich sie dir geben kann…)
mfg Joey

bbcode.js:

var form_name = 'NAME_DES_FORMULARS';
var text_name = 'NAME_DER_TEXTAREA';

var bbcode = new Array();
var bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]',
'[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]','[flash=]', '[/flash]','[size=]','[/size]','[center]','[/center]');
var imageTag = false;

var imageTag = false;
var theSelection = false;
var clientPC = navigator.userAgent.toLowerCase();
var clientVer = parseInt(navigator.appVersion);
var is_ie = ((clientPC.indexOf('msie') != -1) && (clientPC.indexOf('opera') == -1));
var is_win = ((clientPC.indexOf('win') != -1) || (clientPC.indexOf('16bit') != -1));
var baseHeight;
window.onload = initInsertions;


function initInsertions() 
{
	var doc;

	if (document.forms[form_name])
	{
		doc = document;
	}
	else 
	{
		doc = opener.document;
	}

	var textarea = doc.forms[form_name].elements[text_name];
	if (is_ie && typeof(baseHeight) != 'number')
	{	
		textarea.focus();
		baseHeight = doc.selection.createRange().duplicate().boundingHeight;
		// document.body.focus();
	}
}

/**
* bbstyle
*/
function bbstyle(bbnumber)
{	
	if (bbnumber != -1)
	{
		bbfontstyle(bbtags[bbnumber], bbtags[bbnumber+1]);
	} 
	else 
	{
		insert_text('[*]');
		document.forms[form_name].elements[text_name].focus();
	}
}

/**
* Apply bbcodes
*/
function bbfontstyle(bbopen, bbclose)
{
	theSelection = false;
		
	var textarea = document.forms[form_name].elements[text_name];

	textarea.focus();

	if ((clientVer >= 4) && is_ie && is_win)
	{
		// Get text selection
		theSelection = document.selection.createRange().text;

		if (theSelection)
		{
			// Add tags around selection
			document.selection.createRange().text = bbopen + theSelection + bbclose;
			document.forms[form_name].elements[text_name].focus();
			theSelection = '';
			return;
		}
	}
	else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
	{
		mozWrap(document.forms[form_name].elements[text_name], bbopen, bbclose);
		document.forms[form_name].elements[text_name].focus();
		theSelection = '';
		return;
	}
	
	//The new position for the cursor after adding the bbcode
	var caret_pos = getCaretPosition(textarea).start;
	var new_pos = caret_pos + bbopen.length;

	// Open tag
	insert_text(bbopen + bbclose);

	// Center the cursor when we don't have a selection
	// Gecko and proper browsers
	if (!isNaN(textarea.selectionStart))
	{
		textarea.selectionStart = new_pos;
		textarea.selectionEnd = new_pos;
	}	
	// IE
	else if (document.selection)
	{
		var range = textarea.createTextRange(); 
		range.move("character", new_pos); 
		range.select();
		storeCaret(textarea);
	}

	textarea.focus();
	return;
}

/**
* Insert text at position
*/
function insert_text(text, spaces, popup)
{
	var textarea;
	
	if (!popup) 
	{
		textarea = document.forms[form_name].elements[text_name];
	} 
	else 
	{
		textarea = opener.document.forms[form_name].elements[text_name];
	}
	if (spaces) 
	{
		text = ' ' + text + ' ';
	}
	
	if (!isNaN(textarea.selectionStart))
	{
		var sel_start = textarea.selectionStart;
		var sel_end = textarea.selectionEnd;

		mozWrap(textarea, text, '')
		textarea.selectionStart = sel_start + text.length;
		textarea.selectionEnd = sel_end + text.length;
	}	
	
	else if (textarea.createTextRange && textarea.caretPos)
	{
		if (baseHeight != textarea.caretPos.boundingHeight) 
		{
			textarea.focus();
			storeCaret(textarea);
		}		
		var caret_pos = textarea.caretPos;
		caret_pos.text = caret_pos.text.charAt(caret_pos.text.length - 1) == ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;
		
	}
	else
	{
		textarea.value = textarea.value + text;
	}
	if (!popup) 
	{
		textarea.focus();
	} 	

}

/**
* Add inline attachment at position
*/
function attach_inline(index, filename)
{
	insert_text('[attachment=' + index + ']' + filename + '[/attachment]');
	document.forms[form_name].elements[text_name].focus();
}

/**
* Add quote text to message
*/
function addquote(post_id, username)
{
	var message_name = 'message_' + post_id;
	var theSelection = '';
	var divarea = false;

	if (document.all)
	{
		divarea = document.all[message_name];
	}
	else
	{
		divarea = document.getElementById(message_name);
	}

	// Get text selection - not only the post content :(
	if (window.getSelection)
	{
		theSelection = window.getSelection().toString();
	}
	else if (document.getSelection)
	{
		theSelection = document.getSelection();
	}
	else if (document.selection)
	{
		theSelection = document.selection.createRange().text;
	}

	if (theSelection == '' || typeof theSelection == 'undefined' || theSelection == null)
	{
		if (divarea.innerHTML)
		{
			theSelection = divarea.innerHTML.replace(/<br>/ig, '\n');
			theSelection = theSelection.replace(/<br\/>/ig, '\n');
			theSelection = theSelection.replace(/&lt\;/ig, '<');
			theSelection = theSelection.replace(/&gt\;/ig, '>');
			theSelection = theSelection.replace(/&amp\;/ig, '&');
		}
		else if (document.all)
		{
			theSelection = divarea.innerText;
		}
		else if (divarea.textContent)
		{
			theSelection = divarea.textContent;
		}
		else if (divarea.firstChild.nodeValue)
		{
			theSelection = divarea.firstChild.nodeValue;
		}
	}

	if (theSelection)
	{
		insert_text('[quote="' + username + '"]' + theSelection + '[/quote]');
	}

	return;
}

/**
* From http://www.massless.org/mozedit/
*/
function mozWrap(txtarea, open, close)
{
	var selLength = txtarea.textLength;
	var selStart = txtarea.selectionStart;
	var selEnd = txtarea.selectionEnd;
	var scrollTop = txtarea.scrollTop;

	if (selEnd == 1 || selEnd == 2) 
	{
		selEnd = selLength;
	}

	var s1 = (txtarea.value).substring(0,selStart);
	var s2 = (txtarea.value).substring(selStart, selEnd)
	var s3 = (txtarea.value).substring(selEnd, selLength);

	txtarea.value = s1 + open + s2 + close + s3;
	txtarea.selectionStart = selEnd + open.length + close.length;
	txtarea.selectionEnd = txtarea.selectionStart;
	txtarea.focus();
	txtarea.scrollTop = scrollTop;

	return;
}

/**
* Insert at Caret position. Code from
* http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
*/
function storeCaret(textEl)
{
	if (textEl.createTextRange)
	{
		textEl.caretPos = document.selection.createRange().duplicate();
	}
}

/**
* Color pallette
*/
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 bgcolor="#' + color + '">');
				document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;"><img src="images/spacer.gif" style="width:' + width + 'px; height:' + height + 'px; border: 0px" alt="#' + color + '" title="#' + color + '"></a>');
				document.writeln('</td>');
			}

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

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


/**
* Caret Position object
*/
function caretPosition()
{
	var start = null;
	var end = null;
}


/**
* Get the caret position in an textarea
*/
function getCaretPosition(txtarea)
{
	var caretPos = new caretPosition();
	
	// simple Gecko/Opera way
	if(txtarea.selectionStart || txtarea.selectionStart == 0)
	{
		caretPos.start = txtarea.selectionStart;
		caretPos.end = txtarea.selectionEnd;
	}
	// dirty and slow IE way
	else if(document.selection)
	{
		// get current selection
		var range = document.selection.createRange();

		// a new selection of the whole textarea
		var range_all = document.body.createTextRange();
		range_all.moveToElementText(txtarea);
		
		// calculate selection start point by moving beginning of range_all to beginning of range
		var sel_start;
		for (sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++)
		{		
			range_all.moveStart('character', 1);
		}
	
		txtarea.sel_start = sel_start;
	
		// we ignore the end value for IE, this is already dirty enough and we don't need it
		caretPos.start = txtarea.sel_start;
		caretPos.end = txtarea.sel_start;
	}

	return caretPos;
}

function checkBoxValidate(cb) {
    for (j = 0; j < 2; j++) {
	if (eval("document.GB.ckbox[" + j + "].checked") == true) {
		document.GB.ckbox[j].checked = false;
		    if (j == cb) {
			document.GB.ckbox[j].checked = true;
         		}
     		   }
    	}
}

function insertNewsLink(a_sCode, form, area) {
	sNewAdd = new String();
	bAdd    = false;
	aValid  = new Array("link");
	for (i=0; i<aValid.length; i++) {
		if (a_sCode.toLowerCase() == aValid[i]) {
			bAdd = true;
		}
	}
	switch (a_sCode.toLowerCase()) {
		case "link":
			url = window.prompt("enter URL - http:// nicht vergessen!");
			text = window.prompt("enter LINKNAME");
			if (url != null && text != null && url != "" && text != "") 
			{
				sNewAdd = url;
				sNewText = text;
			}
			break;
	}

	if (url != null && text != null && url != "" && text != "") {
		document[form][area].value += "[url=" + sNewAdd + "]" + sNewText + "[/url],\n";
	}
		document[form][area].focus();
}

buttons:
z.B:

<img src="images/bold.png" title="fette schrift" alt="bold" onClick="bbstyle(0)"> <img src="images/italic.png" title="kursive schrift" alt="italic" onClick="bbstyle(2)"> <img src="images/underline.png" title="unterstrichen" alt="underline" onClick="bbstyle(4)"> <img src="images/image.png" title="bild einfuegen" alt="image" onClick="bbstyle(14)"> <img src="images/link.png" title="link" alt="link" onClick="bbstyle(16)"> <img src="images/center.png" title="center" alt="center" onClick="bbstyle(22)">

kann man alles schön im quelltext nachgucken :wink:
musst natürlich noch

var form_name = 'NAME_DES_FORMULARS'; var text_name = 'NAME_DER_TEXTAREA';

anpassen.

Etwas einfaches ist auch was bei SelfHTML zu finden:

http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/

Ist zwar nicht so vielfältig, aber man kann ja selbst auch noch ein bisschen was machen :slight_smile:

lg stgr

$google = true;
aber wende als anfänger mal solch komplizierte dinger wie der BBCode-parser von seiler an, trotz doku finde ich da nicht durch…
wenn du mir da was funzendes geben kannst wär echt geil, gibt natürlich auch nen eintrag in die credits :slight_smile:

was den beitrag von hummer angeht:
sieht auch überzeugend aus, nur leider keine zeit zum testen…weekend und so, wird aber nachgeholt, danke dir auf jeden fall dafür!!!

@stgr:
ebenfalls nen fettes danke! werde ich mir auch mal genauer ansehen

MfG

functions.php

[code]<?php
function bbcodes ($bbcode_text)
{
$bbcode_text = preg_replace("/[b](.)[/b]/Usi", “\1”, $bbcode_text);
$bbcode_text = preg_replace("/[i](.
)[/i]/Usi", “\1”, $bbcode_text);
$bbcode_text = preg_replace("/[u](.)[/u]/Usi", “\1”, $bbcode_text);
$bbcode_text = preg_replace("/[color=(.
)](.)[/color]/Usi", “<span color=”\1">\2", $bbcode_text);
$bbcode_text = preg_replace("/[email=(.
)](.*)[/email]/Usi", “<a href=“mailto:\1”>\2”, $bbcode_text);
return $bbcode_text;
}

function smilies ($bbcode_text)
{
$bbcode_text = str_replace (’:aeh:’,"<img alt=“Smilie :aeh:” src=“images/smilies/aeh.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:aetch:’,"<img alt=“Smilie :aetch:” src=“images/smilies/aetch.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:angel:’,"<img alt=“Smilie :angel:” src=“images/smilies/angel.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:beer:’,"<img alt=“Smilie :beer:” src=“images/smilies/beer.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:ciao:’,"<img alt=“Smilie :ciao:” src=“images/smilies/ciao.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:google:’,"<img alt=“Smilie :google:” src=“images/smilies/google.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:grins:’,"<img alt=“Smilie :grins:” src=“images/smilies/grins.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:hammer:’,"<img alt=“Smilie :hammer:” src=“images/smilies/hammer.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:kiss:’,"<img alt=“Smilie :kiss:” src=“images/smilies/kiss.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:lol:’,"<img alt=“Smilie :lol:” src=“images/smilies/lol.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:motz:’,"<img alt=“Smilie :motz:” src=“images/smilies/motz.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:nacht:’,"<img alt=“Smilie :nacht:” src=“images/smilies/nacht.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:smoke:’,"<img alt=“Smilie :smoke:” src=“images/smilies/smoke.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:spitze:’,"<img alt=“Smilie :spitze:” src=“images/smilies/spitze.gif”>", $bbcode_text);
$bbcode_text = str_replace (’:thx:’,"<img alt=“Smilie :thx:” src=“images/smilies/thx.gif”>", $bbcode_text);
return $bbcode_text;
}
?>[/code]

so hätte ich es auch gemacht, ist halt sehr primitiv programmiert wie ich es sonst auch immer mache :smiley: , soll aber nicht so sicher sein