SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: bbcode-on-the-fly
-
Oct 21, 2005, 11:20 #1
- Join Date
- Jun 2005
- Location
- Leimuiden, The Netherlands
- Posts
- 83
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.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 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.
-
Oct 21, 2005, 13:01 #2
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 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.
Bookmarks