BB Code Enhancements - "select all" feature for BB Code : CODE/HTML/PHP

About this modification :

This mods template allows you added to the BB Code CODE / HTML / PHP function selects all the content in it with a simple button.

Install :

1. Insert javascript code into headinclude template
   AdminCP -> Styles & Templates -> Style Manager -> Edit Templates -> headinclude
   Copy and paste following js code to bottom of headinclude template :
   

   <script type="text/javascript">
       function selectAll(a)
       {
           var e  = a.parentNode.parentNode.getElementsByTagName('code')[0];
           if  (window.getSelection)
           {
               var s = window.getSelection();
               if  (s.setBaseAndExtent)
               {
                   s.setBaseAndExtent(e, 0, e, e.innerText.length -  1);
               }
               else
               {
                   var r = document.createRange();
                   r.selectNodeContents(e);
                   s.removeAllRanges();
                   s.addRange(r);
               }
           }
           else if (document.getSelection)
           {
               var s = document.getSelection();
               var r = document.createRange();
               r.selectNodeContents(e);
               s.removeAllRanges();
               s.addRange(r);
           }
           else if  (document.selection)
           {
               var r = document.body.createTextRange();
               r.moveToElementText(e);
               r.select();
           }
       }
   </script>

2. Insert new code to bbcode template
   ... -> Edit Templates -> BB Code Layout Templates -> bbcode_code
   Find :
   

   {vb:rawphrase code}:
   
   ...and...
   
   {vb:raw code}

   Change :
   

   {vb:rawphrase code}:&nbsp;<input type="button" value="{vb:rawphrase select_code}" onclick="selectAll(this); return false;">
   
   ...and...
   
   <code>{vb:raw code}</code>

3. Insert new code to bbcode_html template (same bbcode_code)
   ... -> Edit Templates -> BB Code Layout Templates -> bbcode_html
   Find :
   

   {vb:rawphrase html_code}:
   
   ...and...
   
   {vb:raw code}

   Change :
   

   {vb:rawphrase html_code}:&nbsp;<input type="button" value="{vb:rawphrase select_code}" onclick="selectAll(this); return false;">
   
   ...and...
   
   <code>{vb:raw code}</code>

4. Insert new code to bbcode_php template (same bbcode_code)
   ... -> Edit Templates -> BB Code Layout Templates -> bbcode_php
   Find :
   

   {vb:rawphrase php_code}:

   Change :
   

   {vb:rawphrase php_code}:&nbsp;<input type="button" value="{vb:rawphrase select_code}" onclick="selectAll(this); return false;">

5. (Optional) Add new phrase : If you don't want to do this step, please look at "Notes" !
   AdminCP -> Languages & Phrases -> Phrase Manager -> [Add New Phrase]
   • Phrase Type : GLOBAL
   • Product : vBulletin
   • Varname : select_code
   • Text : select all

Notes :

If you don't want to create new phrase (step 5), you can search for : {vb:rawphrase select_code} and replace with select all
Next version : add new feature "copy to clipboard".

[nacaruncr]

Thanks men I wait for the upgrade

[f4vn]

This mod doesn`t work with my site. Error is "Parameter is not an object [Break On This Error] r.selectNodeContents(e); " Can you tell me how to fix it ?

Thank you,

[bigs15]

is this work with 3.8.7 thankx in advance...

[bulwinkl]

Great job, I really appreciated this.

This really should be part of the default Vbulletin.

Worked perfectly in 4.2.2:up:

[ahobilam]

I am using VB 4.2.2
The code found in my (custom template) bbcode_code and bbcode_html are different
than what you are instructed for find as below:

<div class="bbcode_container">
	<div class="bbcode_description">{vb:rawphrase html_code}:</div>
	<pre class="bbcode_code"<vb:if condition="$vboptions['codemaxlines']"> style="height:<vb:if condition="$blockheight<=$vboptions['codemaxlines']">{vb:math {vb:math {vb:raw blockheight}+2}}*{vb:stylevar mid_fontSize}}<vb:else />{vb:math {vb:math {vb:raw blockheight}+1}*{vb:stylevar mid_fontSize}}</vb:if>;"</vb:if>>{vb:raw code}</pre>
</div>

Can I replace it, I want to conform before making any changes.

What is the meaning for
....and.....
between the code.
Thanks in advance.

[ramesh_umk3]

it will work as i am running vbulletin 4.2.2

leave ....and.....

replace only starting and ending code which he mentioned

Regards,

[RedHacker]

Thanks it is work with 4.1.7

[john7911]

Hi,
It does not work on my forum 4.2.3
Can somme one tell me where is the problem?
Thank you



-----------------------------------
It's ok I found the problem I forgot a < in the beginning of the code :erm:

[Raptor]

This stopped working in Chrome just recently

Works fine in Edge and cellphone browser

Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 18125.
at selectAll (

[Raptor]

Update:

Select All works in Chrome Version 57.0.2987.133 (64-bit)

Stopped working after update to Chrome Version 58.0.3029.96 (64-bit)

Problem: the last parameter to the "setBaseAndExtent" shouldn't be the text length, it should be the child node count.

https://developer.mozilla.org/en-US/...tBaseAndExtent

I'm not versed enough in Javascript enough to fix this properly. What does make this work is by removing the following:

PHP Code:

if  (s.setBaseAndExtent)
            {
                s.setBaseAndExtent(e, 0, e, e.innerText.length -  1);
            }
            else
            { 


and the } after the else

So the new Javascript in the headinclude is

PHP Code:

<script type="text/javascript">
    function selectAll(a)
    {
        var e  = a.parentNode.parentNode.getElementsByTagName('code')[0];
        if  (window.getSelection)
        {
            var s = window.getSelection();
 
                var r = document.createRange();
                r.selectNodeContents(e);
                s.removeAllRanges();
                s.addRange(r);
 
        }
        else if (document.getSelection)
        {
            var s = document.getSelection();
            var r = document.createRange();
            r.selectNodeContents(e);
            s.removeAllRanges();
            s.addRange(r);
        }
        else if  (document.selection)
        {
            var r = document.body.createTextRange();
            r.moveToElementText(e);
            r.select();
        }
    }
</script> 


Hope this helps someone.

If there's anyone who can post the correct java solution without removing any code that would be great.

My vB is 4.2.4 btw