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:

PHP Code:


<? 

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 Code:

<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

Originally Posted by Halting

Will that place the cursor in between the two tags though?

I'll rewrite my original script:

HTML Code:

<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

Thread: Javascript: BB Code Editor

Thread Tools

Javascript: BB Code Editor

Posting Permissions