Administrative and Maintenance Tools - EditArea Code Editor for Templates & Plugins in Admin CP (vB3, vB4)

Description:

This modification puts the same editor as cPanel uses right in your admin CP for templates, plugins and other code inputs. It's based in part on work done here: https://vborg.vbsupport.ru/showthread.php?p=1854664 , but with all the problems fixed and the editing consolidated into one paste-in. You will have to upload the EditArea product from SourceForge and one file here. You will replace one file, admincp/textarea.php, and optionally edit includes/adminfunctions.php, saving the originals in case you change your mind (you won't!).

If you're not familiar with EditArea from cPanel, it has full syntax dependent highlighting, indenting, a search feature, undo, redo, selectable font size, word wrap toggle and more. See http://www.cdolivet.com/editarea/ .

When installed in your admin CP a small version of EditArea will appear in place of the plain text editor in the template, plugin and other pages where you enter code. The size can be changed with the Increase Size and Decrease Size buttons. If you click the Large Edit Box button you get a full page version (larger than the present plain text version).

Tested in vB4.1.12, should work in all vB4 and vB3 versions.

Installation:

1. Get EditArea from http://sourceforge.net/projects/editarea/. Upload the edit_area (NOT editarea) folder to forum/clientscript.
   
   
2. Make a copy of forum/admincp/textarea.php, renaming it textarea_original.php
   
   
3. Now upload my textarea.php to forum/admincp.
   
   
4. Make a copy of my file, renaming it textarea_ce.php to save it next time you upgrade.

Now you have the usual text editor in the aminCP page and a code editor in the large edit box. Test it out to be sure everything works. If you want editArea in the main page follow these additional steps:

1. Make a copy of forum/includes/adminfunctions.php, renaming it adminfunctions_original.php.
   
   
2. Open the new version of textarea.php and copy the new version of function print_textarea_row() at the bottom.
   
   
3. Open forum/includes/adminfunctions.php and find function print_textarea_row(). In vB4.1.12 it's on line 999 but before that in earlier versions. Rename it print_textarea_row_old(). Now just above it paste in the new version of the function and Save.
   
   
4. Now copy this edited version of forum/includes/adminfunctions.php, renaming it adminfunctions_new.php to save it for next time you upgrade.

You're done, no further editing required.

Here's the file. Best to upload it as a file to preserve tabulation though.

<?php
/*=======================================================================*\
|| ##################################################################### ||
|| # vBulletin 3x, 4x                                                  # ||
|| # ----------------------------------------------------------------- # ||
|| # Copyright 2000-2011 vBulletin Solutions Inc. All Rights Reserved. # ||
|| # This file may not be redistributed in whole or significant part.  # ||
|| # ---------------- VBULLETIN IS NOT FREE SOFTWARE ----------------- # ||
|| # http://www.vbulletin.com | http://www.vbulletin.com/license.html  # ||
|| ##################################################################### ||
\*=======================================================================*/

// ######################## SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);

// ##################### DEFINE IMPORTANT CONSTANTS #######################
define('CVS_REVISION', '$RCSfile$ - $Revision: 53302 $');

// #################### PRE-CACHE TEMPLATES AND DATA ######################
$phrasegroups = array();
$specialtemplates = array();

// ########################## REQUIRE BACK-END ############################
require_once('./global.php');

// ########################################################################
// ######################### START MAIN SCRIPT ############################
// ########################################################################

$vbulletin->input->clean_array_gpc('r', array(
	'name' => TYPE_STR,
	'dir'  => TYPE_STR
));

$vbulletin->GPC['name'] = preg_replace('#[^a-z0-9_-]#', '', $vbulletin->GPC['name']);


?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo vB_Template_Runtime::fetchStyleVar('textdirection'); ?>" lang="<?php echo vB_Template_Runtime::fetchStyleVar('languagecode'); ?>">
<head>
	<title>Code Editor</title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php echo vB_Template_Runtime::fetchStyleVar('charset'); ?>" />
	<link rel="stylesheet" type="text/css" href="../cpstyles/<?php echo $vbulletin->options['cpstylefolder']; ?>/controlpanel.css" />
	<script type="text/javascript" src="../clientscript/yui/yahoo-dom-event/yahoo-dom-event.js?v=<?php echo SIMPLE_VERSION; ?>"></script>
	<script type="text/javascript" src="../clientscript/yui/connection/connection-min.js?v=<?php echo SIMPLE_VERSION; ?>"></script>
	<script type="text/javascript" src="../clientscript/vbulletin-core.js?v=<?php echo SIMPLE_VERSION; ?>"></script>
	<script type="text/javascript" src="../clientscript/edit_area/edit_area_full.js"></script>
	<script type="text/javascript">
	<!--
	var title = opener.document.forms[0].getElementsByTagName('td')[0].innerHTML;
	title = title.replace('Help', '');
	title = title.replace(/\s<span[\s\S]+?>/, ': ');
	title = title.replace('::', ':');
	title = title.replace(/<[\s\S]+?>/g, '');
	
	switch ('<?php echo $vbulletin->GPC['name']; ?>') {
		case "installcode"	: syntaxType = "php";	break;
		case "uninstallcode"	: syntaxType = "php";	break;
		case "phpcode"		: syntaxType = "php";	break;
		case "template"		: syntaxType = "html";	break;
		default			: syntaxType = "html";
	}
	eAL.init({
		id 		: "popuptextarea",	// textarea id
		syntax		: syntaxType,		// syntax to be used for highlighting
		start_highlight	: true,			// to display with highlight mode on start-up
		is_editable	: true,
		allow_toggle	: false,
		allow_resize	: false,
		toolbar 	: "search, go_to_line, undo, redo, select_font, |,syntax_selection,"+
					"change_smooth_selection, highlight, reset_highlight, word_wrap, help"
	});

	id = opener.document.getElementsByName('<?php echo $vbulletin->GPC['name']; ?>')[0].id;

	function getText() {
		if(is_ie) fetch_object('popuptextarea').style.height = '550px';
		var text = opener.eAL ? opener.eAL.getValue(id) : opener.document.getElementById(id).value ;
		document.title = title;
		window.name = id;
		height = is_ie ? 750 : 720 ;
		window.resizeTo(screen.availWidth, height);
		eAL.setValue('popuptextarea', text);
	 	document.getElementsByTagName('td')[0].innerHTML='<b>'+title+'</b>';	
	}
	
	function sendText() {
		if(opener.eAL) {
			opener.eAL.toggle(id);
			opener.eAL.setValue(id, eAL.getValue('popuptextarea'));
			opener.eAL.toggle(id);
		}
		else {
			opener.document.getElementById(id).value = eAL.getValue('popuptextarea');
		}
		opener.focus();
		self.close();
	}	

	// -->
	</script>
	<style type="text/css"> .alt{border-width:1px;font-size:12px;width:80px;}</style>
</head>
<body onload="self.focus(); getText();">
<form name="popupform" tabindex="1">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" class="tborder">
<tr>
	<td class="tcat"  align="center" style="padding:4px;">&nbsp;</td>
</tr>
<tr>
	<td align="center" width = "100%" style="overflow-x:hidden;">
		<textarea name="popuptextarea" id="popuptextarea" class="code" style="width:100%;height:570px;border:0px;" dir="<?php echo vB_Template_Runtime::fetchStyleVar('textdirection'); ?>"></textarea>
	</td>
</tr>
<tr>
	<td class="tfoot" align="center" style="padding:4px;">	
		<input type="button" class="navtitle alt" value="Send" onclick="sendText();" />	
	</td>
</tr>
</table>
</form>
</body>
</html>

<?php/*
                                                   
	        _____________________________________/\_______________________________________
	        \\                                                                          //
		|| Find function print_textarea_row() in forum/includes/adminfunctions.php  ||
		||   at line 999 in vB4.1.12 or before that in earlier versions. Rename     ||
		||   it to some other name such as print_textarea_row_old(). Then paste     ||  
		||               in the version below immediately above it.                 || 
		\\__________________________________________________________________________//

function print_textarea_row($title, $name, $value = '', $rows = 4, $cols = 40, $htmlise = true, $doeditbutton = true, $direction = '', $textareaclass = false)
{
	global $vbphrase, $vbulletin, $editarea_file;
	$direction = verify_text_direction($direction);
	$vbulletin->textarea_id = 'ta_' . $name . '_' . fetch_uniqueid_counter();
	if (!$doeditbutton OR strpos($name,'[') !== false)
	{
		$openwindowbutton = '';
		$javascript = '';
		// trigger hasLayout for IE to prevent template box from jumping (#22761)
		$ie_reflow_css = (is_browser('ie') ? 'style="zoom:1"' : '');
		$resizer = "<div class=\"smallfont\"><a href=\"#\" $ie_reflow_css onclick=\"return resize_textarea(1, '{$vbulletin->textarea_id}')\">$vbphrase[increase_size]</a> <a href=\"#\" $ie_reflow_css onclick=\"return resize_textarea(-1, '{$vbulletin->textarea_id}')\">$vbphrase[decrease_size]</a></div>";
			
	}
	else
	{
		$openwindowbutton = '<p><input type="button" unselectable="on" value="' . $vbphrase['large_edit_box'] . '" class="button" style="font-weight:normal" onclick="window.open(\'textarea.php?dir=' . $direction . '&name=' . $name. '\',\'' . $vbulletin->textarea_id . '\',\'resizable=yes,scrollbars=no,location=no,width=\' + screen.width + \',height=660\');" /></p>';		
		switch ($name) {
			case "installcode" 	: $syntax = "php"; 	break;
			case "uninstallcode" 	: $syntax = "php"; 	break;
			case "phpcode"		: $syntax = "php"; 	break;
			case "template"		: $syntax = "html"; 	break;
			default			: $syntax = "html";
		}
		$javascript = '';
		if($editarea_file !== true)
		{
			$javascript .= '<script type="text/javascript" src="../clientscript/edit_area/edit_area_full.js"></script>';
			$editarea_file = true;
		}
		$javascript .= '	
			<script type="text/javascript">
				// initialisation
				eAL.init({
				id			: "'.$vbulletin->textarea_id.'",
				syntax			: "'.$syntax.'",
				start_highlight		: true,                  	
				font_size		: "8",
				min_height		: 350,
				allow_resize		: false,
				allow_toggle		: false,
				toolbar			: "search, go_to_line, undo, redo, select_font, |, syntax_selection,"+
								"change_smooth_selection, highlight, reset_highlight, word_wrap, help"
				});	
			</script>
		';	 

		// trigger hasLayout for IE to prevent template box from jumping (#22761)
		$ie_reflow_css = (is_browser('ie') ? 'zoom:1;' : '');
		$resizer = "
			<div class=\"smallfont\">
				<input type=\"button\" class=\"button\" value=\"$vbphrase[increase_size]\"  style=\"$ie_reflow_css font-weight:normal;\"  
					onclick=\"
						eAL.toggle('{$vbulletin->textarea_id}');
						var r = resize_textarea(1, '{$vbulletin->textarea_id}');
						eAL.toggle('{$vbulletin->textarea_id}');
						return r;
					\" /> 
				<input type=\"button\" class=\"button\" value=\"$vbphrase[decrease_size]\"  style=\"$ie_reflow_css font-weight:normal;\"
					onclick=\"
						eAL.toggle('{$vbulletin->textarea_id}');
						var r = resize_textarea(-1, '{$vbulletin->textarea_id}');
						eAL.toggle('{$vbulletin->textarea_id}');
						return r;
					\" />
			</div>
		";
	}

	print_label_row(
		$title . $openwindowbutton,
		$javascript . 
		"<div id=\"ctrl_$name\"><textarea name=\"$name\" id=\"{$vbulletin->textarea_id}\"" . iif($textareaclass, " class=\"$textareaclass\"") . " rows=\"$rows\" cols=\"$cols\" wrap=\"virtual\" dir=\"$direction\" tabindex=\"1\"" . iif($vbulletin->debug, " title=\"name=&quot;$name&quot;\"") . ">" . iif($htmlise, htmlspecialchars_uni($value), $value) . "</textarea>$resizer</div>",
		'', 'top', $name
	);
}

*/?>

[nerbert]

Reserved

[kh99]

Excellent, just yesterday I was thinking there should be something like this. Nice job.

[DannyV]

Looking good.
Will try it out later today.

[TheSupportForum]

tagged for later use

but think this should be updated to 4.2.0 version too please

[kh99]

Seems to work fine in vb 4.2.0.

[nerbert]

Originally Posted by kh99

Seems to work fine in vb 4.2.0.

Thanks for posting that. I didn't want to ask my other admin to upgrade just for my vB.org mod hobby.

Not much changes in the admin CP from one version to another, except to add new features.

[Kiran-E-Sehar]

Open the new version of textarea.php and copy the new version of function print_textarea_row() at the bottom. can you explain from where to where need to copy?
thanks

[Kiran-E-Sehar]

Installed, Nominated for the MOTM

Thanks a lor for this great feature

Please explain more for additional feature for main page
thanks buddy

[nerbert]

Originally Posted by Kiran-E-Sehar

Installed, Nominated for the MOTM

Thanks a lor for this great feature

Please explain more for additional feature for main page
thanks buddy

Go to textarea.php and copy everything below the fancy box all the way down to the last curly bracket and paste it into adminfunctions.php right above the original version of the function. Then change the name of the original version of the function so you don't have two versions of the same function. Since you should already have a copied version of adminfunctions.php you could just delete the old version of the function.. Or you could copy the new function out of the code here in the opening post.