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

*/?>

[cmwg]

Thank you very much mate. Works fine!

[tbworld]

@nerbert - I had a good laugh at myself.

I spent good time and energy adding codemirror to my admincp, and all along you had already completed this mod. I was even the first person to thank you for this mod. So I am feeling a bit foolish right now. Next time I need to ask around before I do some code Well still great work on your part!

Of the two editors, which one do you like better, if you have compared them... codemirror, editarea?



G

[nerbert]

Originally Posted by tbworld

@nerbert - I had a good laugh at myself.

I spent good time and energy adding codemirror to my admincp, and all along you had already completed this mod. I was even the first person to thank you for this mod. So I am feeling a bit foolish right now. Next time I need to ask around before I do some code Well still great work on your part!

Of the two editors, which one do you like better, if you have compared them... codemirror, editarea?



G

Funny you should ask ...

I built a new product for this using CodeMirror but I'm not quite ready to publish it yet because I'm also working on a full file manager that completely replaces the awful one in cPanel and I thought I would just incorporate the template/plugin editor into the file manager product. It shouldn't be too much longer before I publish the file manager + template editor + an improved version of my function and hook finder.

As for the comparison between EditArea and CodeMirror there's no contest: CodeMirrror is by far the better product (no glitches, works in Opera, much faster). The reason it isn't used more is that it doesn't come with toolbars, but I have those working with search and replace, highlight matching, auto-formatting (for minified JS) and other features. Most of what still needs done is phrasing and I'm sure you know how tedious that can be. But of course a project this complicated seems never to be 100% done.

[tbworld]

Originally Posted by nerbert

Funny you should ask ...

I am impressed. I have also upgraded the plugin hook system it lacked some real tools. I guess I really didn't need to do any of it, but it gave me a reason to go through the code, way back when. I can't wait to see what you have done!

I do understand the undertaking of phrasing and since most of the time I can avoid it, I do. Since my development has been for private boards it is nice to slice a few things off the task list. But you get major kudos from me for the undertaking.

The website I run that uses the forum used to be international, but since most of the industrialized nations use English for international business we converted to English only and embedded translators instead. Unfortunately, translators are terrible when you are trying to convey an exact point. Having people leave messages in all sorts of languages is useless too. My point is I am glad I am out of the language business -- for now. Management can always change their mind.

[Jack.D]

I can't seem to get it to work when I open the large edit box, I get the following.

PHP Code:

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 = "
textarea_id}')\">$vbphrase[increase_size] textarea_id}')\">$vbphrase[decrease_size]
"; } else { $openwindowbutton = '


';     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 .= ''; $editarea_file = true; } $javascript .= '     ';     // trigger hasLayout for IE to prevent template box from jumping (#22761) $ie_reflow_css = (is_browser('ie') ? 'zoom:1;' : ''); $resizer = "
textarea_id}'); var r = resize_textarea(1, '{$vbulletin->textarea_id}'); eAL.toggle('{$vbulletin->textarea_id}'); return r; \" />  textarea_id}'); var r = resize_textarea(-1, '{$vbulletin->textarea_id}'); eAL.toggle('{$vbulletin->textarea_id}'); return r; \" />
"; } print_label_row( $title . $openwindowbutton, $javascript . "
$resizer
", '', 'top', $name ); } */?> 


[nerbert]

Is the window opening and you are seeing this in the new window?

What I see is part of the code for the new version of function print_textarea_row(). You need to re-do the paste-in of the new function into includes/adminfunctions.php. It looks like you copied up a little too much and got

"*/?>"

at the end. The function should end with the closing curlie bracket "}" and not have anything after that.

I no longer use this product as I have a much improved version but it's incorporated into a larger product I haven't released yet.

[metebnueimat]

its not working on vb 3.7.6, bellow the error:
Fatal error: Class 'vB_Template_Runtime' not found in admincp/textarea.php on line 40 Call Stack #TimeMemoryFunctionLocation 10.0003640152{main}( )../textarea.php:0

[nerbert]

I think it's time to upgrade!

This product is so old I don't even have a copy of it and I can't run vB 3 anymore, so I'm not sure I can get this working for you, but I'll give it a try here.

Open textarea.php and look for these:

Near the top

dir="<?php echo vB_Template_Runtime::fetchStyleVar('textdirection' ); ?>"

lang="<?php echo vB_Template_Runtime::fetchStyleVar('languagecode') ; ?>"

charset=<?php echo vB_Template_Runtime::fetchStyleVar('charset'); ?>"

Near the bottom

dir="<?php echo vB_Template_Runtime::fetchStyleVar('textdirection' ); ?>"

Now just edit them out and see what happens. They should default to the right values.

[thetechgenius]

This is by far the best AdminCP Code Editor Addon ever. I seen some other addons like this one, such as the one that uses the "codemirror" javascript libraries, but that one has many bugs and missing features.

With the Codemirror version when you press "CTRL+F" to bring up the "Find" box, nothing happens. Then when you use the browsers built-in find feature, the browser cannot search in the Code Editor Box, so it never finds anything.

But this addon has its own built in "Find" feature and when you press "CTRL+F", it actually bring up a small "Find" box to search for text inside the Code Editor Box.

Thank you!!