Facebook Twitter Pinterest Share

vBulletin 3.X Add-ons & Template Modifications All the latest vBulletin 3.X Add-ons & Template Modifications.


New Thread  Post Reply
KrazyFire's Avatar
KrazyFire : Admin
KrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant futureKrazyFire has a brilliant future
offline Joined: Sep 2007 Location: UK Posts: 698 Thanked: 1,001
  #1  
Thread Starter Unread 12-19-07
Adding EditArea for Template & Plugin Editing

This isnt a Plugin or Mod, but a collection of code changes to allow the use of Edit Area to edit vbulletin templates and in the plugin code editor areas.

http://cdolivet.net/editarea/



Download the zip file from the website above and unpack the zip file. Upload the edit_area folder into your /clientscript/ directory in your vbb installation. (See additional instructions at the bottom). You should now have a /clientscript/edit_area folder with files such as edit_area.css , edit_area.js and so on in it. Be sure that you also uploaded the images, langs, plugs and reg_syntax folders.


This requires changes to two files, one of them being optional.

The first file to edit is the includes/adminfunctions.php file
Using the UNMODIFIED 3.7.0 beta 2 version (Unsure of actual locations of the code in 3.6.8 and ealier versions, but the edits are basicly the same)

The first edit is adding the javascript to the page.
Open up the file includes/adminfunctions.php and look for the first
<script type=\"text/javascript\">
It should be around line 295.

Before that line, add
<script language=\"Javascript\" type=\"text/javascript\" src=\"../clientscript/edit_area/edit_area_full.js\"></script>
*Read EditArea documentation for advanced options.

Now, we will look for the function print_textarea_row which starts around line 894

This is where the majority of the code changes are.

Comment out line 915 (add // infront of the line)
$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>";
And then add the following code after the line you just commented out.
    if (!$doeditbutton OR strpos($name,'[') !== false)
    {
        $javascript_source = '';
    } else {
        $javascript_source = '
            <script language="Javascript" type="text/javascript">
                // initialisation
                editAreaLoader.init({
                    id: "'.$vbulletin->textarea_id.'"
                    ,language: "en"
                    ,syntax: "html"
                    ,start_highlight: true	
                    ,font_size: "8"
                    ,font_family: "verdana, monospace"
                    ,allow_resize: "both"
                    ,allow_toggle: true
                    ,replace_tab_by_spaces: 4
                    ,min_height: 350
                    ,syntax_selection_allow: "css,html,js,php,xml"
                    ,toolbar: " search, go_to_line,fullscreen, |, undo, redo, |, select_font,|, syntax_selection, |, change_smooth_selection, highlight, reset_highlight, |, help"
                });	
            </script>
        ';
    }
Please read up on EditArea documentation to adjust some of the settings to your new editor interface

The last change in this file is a few lines down from the code you just pasted. Should be line 943.

Add
 $javascript_source.
to the begining of the following line
"<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>",
It should look like
 $javascript_source . "<div id=\"ctrl_$name\"> ...
Save and close this file!

Right now, the template editor usable and with a full screen option built into it, you shouldnt need a reason to use the Large Edit Box option. However, those changes are also quite easy to do so i will add those.

Open up the file admincp/textarea.php

On line 48,
opener.document.getElementsByName('<?php echo $vbulletin->GPC['name']; ?>')[0].value = textarea.value;
Change too
opener.document.getElementsByName('<?php echo $vbulletin->GPC['name']; ?>')[0].value = editAreaLoader.getValue("popuptextarea");
Before the closing </head> tag, add
<script language="Javascript" type="text/javascript" src="/clientscript/edit_area/edit_area_full.js"></script>
*Read EditArea documentation for advanced options.

Replace the existing <body> tag (the entire line) with the following
<body onload="self.focus(); editAreaLoader.setValue('popuptextarea', opener.editAreaLoader.getValue('<?php echo $vbulletin->GPC['name']; ?>'));" style="margin:0px">
<script language="Javascript" type="text/javascript">
    // initialisation
    editAreaLoader.init({
        id: "popuptextarea"
        ,language: "en"
        ,syntax: "html"	
        ,start_highlight: true	
        ,font_size: "8"
        ,font_family: "verdana, monospace"
        ,allow_resize: "both"
        ,allow_toggle: true
        ,replace_tab_by_spaces: 4
        ,syntax_selection_allow: "css,html,js,php,xml"
        ,toolbar: " search, go_to_line, fullscreen, |, undo, redo, |, select_font,|, syntax_selection, |, change_smooth_selection, highlight, reset_highlight, |, help"
    });	
</script>
And you're done.


Some screenshots of the result..

**Note:
For whatever reason, you cannot save text from the Large Edit Box into the main window IF you have the Edit Area editor enabled! you MUST uncheck the Toggle Editor checkbox before clicking the Large Edit Box button. If you fail to do that, you may or may not save your changes and you may loose the textarea data all together.

For whatever reasons, while
editAreaLoader.setValue('popuptextarea', 
opener.editAreaLoader.getValue('<?php echo $vbulletin->GPC['name']; ?>'))
works, the reverse
opener.editAreaLoader.setValue('<?php echo $vbulletin->GPC['name']; ?>',
editAreaLoader.getValue('popuptextarea'));
Attached Images You must register or login to view attachments.
New Thread  Post Reply

Thread Tools

Bookmarks
  • Submit Thread to Facebook
  • Submit Thread to Twitter
  • Submit Thread to Pinterest
  • Submit Thread to LinkedIn
  • Submit Thread to Reddit
Tags
plugin, editing, template, editarea, adding
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Powered by GYSN Underground 2021