PDA

View Full Version : Adding EditArea for Template & Plugin Editing

sweede
19 Dec 2007, 17:03
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/


Edit area
Here is EditArea, a free javascript editor for source code. (That is no way a WYSIWYG editor).
This editor is designed to edit souce code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight (for small text).

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


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


It should be around line 295.

Before that line, add


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


*Read http://cdolivet.net/editarea/editarea/docs/include.html 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)


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



And then add the following code after the line you just commented out.


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


Please read up on http://cdolivet.net/editarea/editarea/docs/configuration.html 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


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


to the begining of the following line


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



It should look like


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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,


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


Change too


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



Before the closing </head> tag, add


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


*Read http://cdolivet.net/editarea/editarea/docs/include.html for advanced options.

Replace the existing <body> tag (the entire line) with the following


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


works, the reverse


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



does not, if anyone knows the secret to getting this to work, please post here!

---------------------------------------
**Addition
In the adminfunctions.php file, the line that we added that says


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


change to


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



Before the line that reads


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



add



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



Anything in the template editor will default to HTML syntax, anything in the plugin section will default to PHP syntax and anywhere else, HTML syntax.

you can also add other lines here that could disable the javascript editor from showing, one example is adding


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------


before the default: line and this would disable the EditArea box. An alternative to searching and replacing text in many of the files.

you can also prevent the Large Area Button from being displayed by adding


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



in whatever case statements you would like (i have it in the install/uninstall, phpcode and template editors along with the default selection).
soulface
19 Dec 2007, 18:00
Just gr8!

/me installed
Elmer
19 Dec 2007, 18:50
Thnks! installed.
ChurchMedia
19 Dec 2007, 18:50
This is WAY cool! It's going to save me a lot of cutting and pasting. Thanks for sharing this. Great work!

:)
Magnumutz
19 Dec 2007, 19:09
Dude, this is really awesome. Does it support a replace function of a text editor? :D
sweede
19 Dec 2007, 19:12
Click the binacular icon, if you're using IE though that stupid "scripted window" warning pops up and either refreshes your page or blows the world up or something like that. i hate that popup warning.

see attached
Magnumutz
19 Dec 2007, 20:46
It's awesome. Good job dude.
I'll nominate this for MOTM.
sweede
19 Dec 2007, 23:06
Ive noticed that this box appears in places that you may not want it to, such as the Search Templates area.

to disable the box from appearing (Which btw, also disables the Large Edit Box button), you just need to add a few more of the options to the print_textarea_row() function call in the appropriate area.


------------ See the **Addition section to the modifications post
Ba$im
20 Dec 2007, 11:12
thanx.
sweede
21 Dec 2007, 07:54
There are no changes to the original files between vb 3.7.0 beta 2 and vb 3.7.0 beta 3. if you update to the latest beta, be sure not to overwrite the two files you have edited.
Triky
21 Dec 2007, 12:08
Is there a search function?
Snake
21 Dec 2007, 16:26
Nice release!
sweede
21 Dec 2007, 21:07
Is there a search function?

See my 3rd post.
hocphp
26 Dec 2007, 17:41
i will install . thank
Wayne Luke
28 Dec 2007, 19:51
Click the binacular icon, if you're using IE though that stupid "scripted window" warning pops up and either refreshes your page or blows the world up or something like that. i hate that popup warning.


It can be turned off in the options. I do not get prompts for this. I can't remember which option does it though.
gothicuser
29 Dec 2007, 16:51
This walks on water, great and thanks.

One (major) problem for me is that it only fully works in M$ IE thingy :(
In FF it just displays the normal small edit box, and clicking on the 'Large Edit' opens the window and displays "False" (and nothing else) at the top of the window.

In Safari I get the full editor in the small window but again get the "False" in the large edit box.

p.s. I use FF on Linux and Safari on my Mac (where I do all my work)
sweede
29 Dec 2007, 17:08
This walks on water, great and thanks.

One (major) problem for me is that it only fully works in M$ IE thingy :(
In FF it just displays the normal small edit box, and clicking on the 'Large Edit' opens the window and displays "False" (and nothing else) at the top of the window.

In Safari I get the full editor in the small window but again get the "False" in the large edit box.

p.s. I use FF on Linux and Safari on my Mac (where I do all my work)

Ya, the interaction between the normal in window (or parent) text area and when you click on the large edit box is a mess. It doesnt seem to want to communicate between the parent window (opener) and the new window both directions, I can only get it to work one way on IE.

I gave up on using the large edit box all together and used the fullscreen option in the normal parent window.
gothicuser
29 Dec 2007, 17:55
http://www.cornishserver.com/09.gif Oops. found that the Scriptblocker addon in FF was on steroids and over enthusiastically thought the editor was not nice. All working nicely (bar the Large Edit) But yes, full page will suffice :D
KURTZ
29 Dec 2007, 19:25
i think that this isn't ad add-on but a templates edit ... :)
sweede
29 Dec 2007, 19:34
i think that this isn't ad add-on but a templates edit ... :)

It's a code modification, no templates are edited.
wolfe
09 Jan 2008, 19:45
one word FANTASTIC :P