PDA

View Full Version : Javascript: BB Code Editor


Halting
24-09-2006, 10:34 AM
Hey,

I'm having trouble finding the code which a vbulletin uses for the quick reply textarea. I can't identify how the cursor is being put in between the tags, for instance the bold tags when you select 'B'. If anybody know's how it's being done, please let me know. Repuation to whoever helps :)

Thank You,
Halting
uber
24-09-2006, 10:40 AM
its ajax
ask someone on vb.org or vb.com they'll probably know more.
Dentafrice1
25-09-2006, 07:40 PM
This isn't javascript but its BBCode script:


<?
function bbcode($content){
// Our bbcode function
$content = nl2br($content); // Add a <BR> everytime you hit 'return'

$match = array(
'#\[b\](.*?)\[\/b\]#se', // Bold Tag
'#\[i\](.*?)\[\/i\]#se', // Italic Tag
'#\[u\](.*?)\[\/u\]#se', // Underlined Tag
'#\[url=(.*?)\](.*?)\[\/url\]#se', // Url Tag
'#\[url\](.*?)\[\/url\]#se', // Url Tag
'#\[img\](.*?)\[\/img\]#se', // Image Tag
'#\[code\](.*?)\[\/code\]#se', // Code Tag
'#\[php\](.*?)\[\/php\]#se', // PHP Tag
'#\[print\](.*?)\[\/print\]#se', // Print Tag

############## Smilies #############################
"':\)'",
"':p'",
"':ohmy:'",
"':blush:'",
"':angry:'",
"':!!:'",
"':cool:'",
"':huh:'",
"':blink:'",
"':biggrin:'",
"':laugh:'"
);

$replace = array(
"'<b>\\1</b>'", // Bold
"'<i>\\1</i>'", // Itlaic
"'<u>\\1</u>'", //Underlined
"'<a href=\"\\1\" target=\"_BLANK\">\\2</a>'", // Url
"'<a href=\"\\1\" target=\"_BLANK\">\\1</a>'", // Url
"'<img border=\"0\" src=\"\\1\">'", // Image
"'<u><b>Code:</b></u>
<div style=\"border: 1px dotted #000000; background-color: #CCCCCC;\"><font face=\"Arial\">
'.highlight_string(stripslashes(str_replace('<br />', '', '$1')), true).'</font></div>'", // Code
"'<u><b>PHP Code:</b></u>
<div style=\"border: 1px dotted #000000; background-color: #CCCCCC;\"><font face=\"Arial\">
'.highlight_string(stripslashes(str_replace('<br />', '', '$1')), true).'</font></div>'", // PHP
"'<u><b>Print Out:</b></u>
<div style=\"border: 1px dotted #000000; background-color: #CCCCCC;\"><font face=\"Arial\">
'.highlight_string(stripslashes(str_replace('<br />', '', '$1')), true).'</font></div>'", // Print

######## Smilies BBCODE #######################
"<img src=\"http://sitename.com/images/smilies/smile.gif\">",
"<img src=\"http://sitename.com/images/smilies/tongue.gif\">",
"<img src=\"http://sitename.com/images/smilies/ohmy.gif\">",
"<img src=\"http://sitename.com/images/smilies/blush.gif\">",
"<img src=\"http://sitename.com/images/smilies/angry.gif\">",
"<img src=\"http://sitename.com/images/smilies/!!.gif\">",
"<img src=\"http://sitename.com/images/smilies/cool.gif\">",
"<img src=\"http://sitename.com/images/smilies/huh.gif\">",
"<img src=\"http://sitename.com/images/smilies/blink.gif\">",
"<img src=\"http://sitename.com/images/smilies/biggrin.gif\">",
"<img src=\"http://sitename.com/images/smilies/laugh.gif\">"
);

return preg_replace($match, $replace, $content); // Replaces the bbcode array with the html array.
}
?>
nets
26-09-2006, 09:59 PM
I'll write you a basic JavaScript BB Code editor, which should be pretty easy to modify to your needs:


<html>
<head>

<title>Josh's Basic "BB-Code" Editor xoxoxoxo</title>

<script type="text/javascript">
<!--

function bbEncapsulate(abbr)
{

var editor = document.getElementById('editor');

try {
tmp = document.selection.createRange();
tmp.text = abbr.concat(tmp.text).concat(abbr.replace(/^\[/, '[/'));
} catch(e) {
var tmp = editor.value.substring(editor.selectionStart, editor.selectionEnd);
var tmpfin = Number(editor.selectionStart) + tmp.length;
var str = editor.value.substring(0, editor.selectionStart);
var mid = abbr.concat(tmp).concat(abbr.replace(/^\[/, '[/'));
var fin = editor.value.substring(tmpfin, editor.selectionEnd);
tmp = str.concat(mid).concat(fin);
}

editor.value = tmp;
}
-->
</script>
</head>
<body>

<pre>

<textarea id="editor"></textarea>

<button onclick="bbEncapsulate('[B]')">Bolden!</button>
<button onclick="bbEncapsulate('[I]')">Italicise!</button>
<!-- ETC.. ETC.. -->

</pre>
</body>
</html>
Mentor
28-09-2006, 09:11 PM
are you asking for:
1) bbcode parser
- php or somthing that converts [ img]somepic.gif[/img] to <img src="somepic.gif">
2) a bbcode short cuts.
- a javascript button that places bb code somewhere automaticaly
3) a live preview
-nice bit of ajax where bbcode is instantly converted in to the relivant html and displayed in that way.

1+2 are **** easy
3 will be somewhat more diffacult "/
Halting
29-09-2006, 03:12 PM
Neither of them. I can make my own BBCode parser, but thank you!


I'm having trouble finding the code which a vbulletin uses for the quick reply textarea. I can't identify how the cursor is being put in between the tags, for instance the bold tags when you select 'B'. If anybody know's how it's being done, please let me know.
I thought that summed up what I wanted.

When you are using 'Quick Reply' on a vBulletin board; when you press the 'B' button, for bold, the opening and closing tags for the bold effect will be put into the textarea, and you're cursor will be on between. For instance: CURSOR

How are they doing this?
nets
29-09-2006, 03:25 PM
Look at the script I just posted? ^______^
Halting
29-09-2006, 04:10 PM
Will that place the cursor in between the two tags though?
nets
29-09-2006, 07:12 PM
Will that place the cursor in between the two tags though?
I'll rewrite my original script:


<html>
<head>

<title>Josh's Basic "BB-Code" Editor xoxoxoxo</title>

<script type="text/javascript">
<!--

function bbEncapsulate(abbr)
{


var editor = document.getElementById('editor');

// Define Selection Positions For Internet Explorer
if(typeof(editor.selectionStart) == 'undefined')
{
var range = document.selection.createRange();
var bookmark = range.getBookmark();
editor.selectionStart = bookmark.charCodeAt(2) - 14;
editor.selectionEnd = editor.selectionStart + range.text.length;
}


// Author BB-Code Counterpart
var abbr2 = abbr.replace(/^\[/, '[/');


// Previse Selections
var SelectStart = editor.selectionStart + abbr.length
var SelectFinish = editor.selectionEnd + abbr.length;


// Disect Datum
var start = editor.value.substring(0, editor.selectionStart);
var middleText = editor.value.substring(editor.selectionStart, editor.selectionEnd);
var middle = abbr + middleText + abbr2;
var finish = editor.value.substring(editor.selectionEnd, editor.value.length);


// Concatenate And Ammend
editor.value = start + middle + finish;
var editor = document.getElementById('editor');


// Reimpose Range Selection
try
{
var r = editor.createTextRange();
r.collapse();
r.moveEnd('Character', SelectFinish);
r.moveStart('Character', SelectStart);
r.select();
}
catch(e)
{
editor.focus();
editor.setSelectionRange(SelectStart, SelectFinish);
}


}

-->
</script>
</head>
<body>

<pre>
<textarea id="editor"></textarea>

<button onclick="bbEncapsulate('[B]')">Bolden!</button> <button onclick="bbEncapsulate('[I]')">Italicise!</button></pre>

</body>
</html>

Haven't tested.
Dentafrice1
29-09-2006, 09:53 PM
www.fckeditor.net I think :P

Want to hide these adverts? Register an account for free!