PDA

View Full Version : EditArea Code Editor for Templates & Plugins in Admin CP (vB3, vB4)



admin
30-09-2012, 02:00 PM
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: http://www.vbulletin.org/forum/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:


Get EditArea from http://sourceforge.net/projects/editarea/. Upload the edit_area (NOT editarea) folder to forum/clientscript.
Make a copy of forum/admincp/textarea.php, renaming it textarea_original.php
Now upload my textarea.php to forum/admincp.
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:

Make a copy of forum/includes/adminfunctions.php, renaming it adminfunctions_original.php.
Open the new version of textarea.php and copy the new version of function print_textarea_row() at the bottom.
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.
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,widt h=\' + 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
);
}

*/?>

Screenshots:

http://s13.postimage.org/65btj48bn/admin1.jpg (http://postimage.org/image/65btj48bn/) http://s13.postimage.org/gtfkhyiar/admin2.jpg (http://postimage.org/image/gtfkhyiar/) http://s13.postimage.org/ruapmzajn/textarea.jpg (http://postimage.org/image/ruapmzajn/)