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".

[RedHacker]

Hello can be fix this to work ?

[PinkMilk]

CSS4 solution:

.selectable{
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */
}

user-select is a CSS Module Level 4 specification, that is currently a draft and non-standard CSS property, but browsers support it well ? see #search=user-select.

Read more on user-select here on MDN and play with it here in w3scools

Source

[RedHacker]

No work at 4.2.5