bbcode-on-the-fly

**Sjoerd** · Oct 21, 2005, 10:20

A while ago, I mentioned I worked on a [ little project ] which has some big abilities. Because I still have not found a solution to the problem I had, I will post a bigger example which -I hope- will gain the interest of some of you...

HTML Code:

<!-- Create a iframe which will contain the text -->
<iframe id="rtetest" name="rtetest" width="400" height="200" src="about:blank"></iframe>

<script language="javascript" type="text/javascript">

// ----------------------------------------------------------
//  bbcode-on-the-fly implementation by Sjoerd van der Hoorn
//  Please do not remove these two lines.
// ----------------------------------------------------------

// For now, this code will only work with Internet Explorer
// --------------------------------------------------------
if (document.all)
{
	// Create an object for the iframe
	oRTE = frames["rtetest"].document;
	// Write some content to it
	oRTE.open();
	oRTE.write("<html><body style=\"font-family: Tahoma; font-size: 8pt;\">Just some plain text?<\/body><\/html>");
	oRTE.close();
	// Enter design mode
	oRTE.designMode = "On";
	
	// Capture keypresses
	oRTE.onkeyup = function ()
	{
		// Render the bbcode. Before doing so, the position of the caret
		// should be saved in order to put it back after the bbcode is
		// translated into HTML objects
		oRTE.body.innerHTML = render_bbcode(frames["rtetest"].document.body.innerHTML);
	}
}

function render_bbcode(text)
{
	bbcode = new Array();
	html = new Array();
	i = 0;

	// Code for generating smileys, truncated list
	// -------------------------------------------
	bbcode[i] = /\:[-]{0,1}\)/gi;
	html[i++] = "<img src=\"smile.gif\">";

	bbcode[i] = /\;[-]{0,1}\)/gi;
	html[i++] = "<img src=\"wink.gif\">";

	bbcode[i] = /\:[-]{0,1}D/gi;
	html[i++] = "<img src=\"biggrin.gif\">";

	// Code for generating bbcode, truncated list
	// ------------------------------------------
	bbcode[i] = /\[b\](.+?)\[\/b\]/gi;
	html[i++] = "<b>$1<\/b>";

	bbcode[i] = /\[i\](.+?)\[\/i\]/gi;
	html[i++] = "<i>$1<\/i>";

	bbcode[i] = /\[u\](.+?)\[\/u\]/gi;
	html[i++] = "<u>$1<\/u>";

	bbcode[i] = /(\[img\])(http:\/\/|ftp:\/\/)(.+?)(\[\/img\])/ig;
	html[i++] = "<img src=\"$2$3\" border=\"0\" alt=\"$2$3\r\rClick to open this image into a new window\" onClick=\"window.open('$2' + '$3');\">";

	bbcode[i] = /(\[code\])((.|\n)+?)(\[\/code\])/ig;
	html[i++] = "<table width=\"95%\" cellpadding=\"2\" border=\"0\"><tr><td style=\"font-size: 10px;\"><b>Code:<\/b><\/td><\/tr><tr><td style=\"font-family: Courier New; font-size: 11px; color: #006600; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px\">$2<\/td><\/tr><\/table>";

	// Loop through the supplied text and replace
	// all instances using regular expressions
	for (var arrayCounter = 0; arrayCounter < bbcode.length; arrayCounter++)
	{
		text = text.replace(bbcode[arrayCounter], html[arrayCounter]);
	}
	return text;
}

</script>

Please note it only works in Internet Explorer for now. Because the "innerHTML" method is used, the caret is always put on the end of the iframe, even if you want to edit something in the middle. Does anybody know a way to save the caret position, run the innerHTML code and then put back the caret?

Please note that if you want to see the smileys, you should put three images named smile.gif, wink.gif and biggrin.gif into the same folder as the HTML code.

**Kravvitz** · Oct 21, 2005, 12:01

http://www.google.com/search?q=IE+te...ursor+position

The SitePoint Forums have moved.

User Tag List

Thread: bbcode-on-the-fly

Thread Tools

Display

bbcode-on-the-fly

Bookmarks

Bookmarks

Posting Permissions