PDA

View Full Version : BB Code Enhancements - Copy Code to Clipboard for CODE/HTML/PHP BBCode


TheDigitalCouch
07-20-2022, 09:00 PM
vBulletin 4 Creator: BCP_Hung (https://vbulletin.org/forum/member.php?u=433944)
vBulletin 4 Mod Link: https://vbulletin.org/forum/showthread.php?t=264981&highlight=copy+code
Javascript Fix: Raptor (https://vbulletin.org/forum/member.php?u=774)

Working with vB 5.6.9

About:

This modification adds a "Copy Code" box that will select all of the code within the box, as well as automatically copy to clipboard.

The vB4 mod did not automatically copy the code, which I've fixed in this version.

Installation

Copy and paste the following javascript code at the bottom of your head_include template:
AdminCP -> Styles -> Style Manager -> Edit Templates -> head_include
<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);
document.execCommand('copy')

}
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>

Save.

For CODE BBCode:

Navigate to AdminCP -> Styles -> Style Manager -> Edit Templates -> bbcode_code

Find:
{vb:rawphrase code}:

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

Find:
{vb:raw code}

Replace with:
<code>{vb:raw code}</code>

Save.

For HTML BBCode:

Navigate to AdminCP -> Styles -> Style Manager -> Edit Templates -> bbcode_html

Find:
{vb:rawphrase html_code}:

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

Find:
{vb:raw code}

Replace with:
<code>{vb:raw code}</code>

Save.

For PHP BBCode:

Navigate to AdminCP -> Styles -> Style Manager -> Edit Templates -> bbcode_php

Find:
{vb:rawphrase php_code}:

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

Find:
{vb:raw code}

Replace with:
<code>{vb:raw code}</code>

Save.

Then add the following to your css_additional.css:
.bbcode_container .bbcode_description {
background: #777;
font-weight: 8;
padding: 5px;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-size: 10px;
font-weight: 7;
float: right;
margin-right: 5px;
}

Save.

You may need to make some adjustments.
Enjoy!