SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast Sjoerd's Avatar
    Join Date
    Jun 2005
    Leimuiden, The Netherlands
    0 Post(s)
    0 Thread(s)

    Post bbcode-on-the-fly

    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.write("<html><body style=\"font-family: Tahoma; font-size: 8pt;\">Just some plain text?<\/body><\/html>");
    	// 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=\"'$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;
    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.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    0 Post(s)
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts