Because I absolutely hate editing templates via the CP, I whipped up an extension to make life a little easier for myself while I’m doing heavy editing. I’ve incorporated EditArea into the template textarea. It makes coding super easy by adding line numbers, the ability to tab in the textarea along with tabbing (and shift-tabbing) blocks of code. It also allows a really hot fullscreen edit mode.
It’s my first plugin and I’m sure it needs some cleaning up, but it works flawlessly for me so I figured I should share it.
It does not screw with the code in any way, as far as I know… but I’d love to hear what everyone things. As always, don’t go editing your primary templates with it until we’ve all had a chance to test it out some!
Here are some screenshots of it in action!
No real documentation as of yet and you have to manually edit the path to the .js file in the extension until I get around to creating a settings area for it. Here’s v1.0…
Instructions. 1. Download and extract the ext.editarea.php file. 2. Open up the file and change the path to the javascript to the full path (http://www.domain.com/js/edit_area_full.js), save it and upload it into your /system/extentions directory. 3. Upload the javascript files to your server. 4. Activate the extension through the admin area in CP. 5. Try editing a NON-important template. 6. Profit! (hopefully)
Sorry, I wasn’t clear. By “it” I meant EditArea. It’s not perfect (syntax highlighting can get a little goofy, I noticed), but it’s only at 0.6.4 or something like that. Your extension works just fine, as far as I can tell. I haven’t seen any crashes, hiccups, or other shenanigans.
Yes, the first post isn’t 100% clear on where to get the js files and what to do with them. I wrote this to assist:
1) download extension 2) download zip file from EditArea 3) Open zip file / upload directory named edit_area to http://www.website.com/js/edit_area/ 4) open extension - around line 42
right below
$editareacode = '
see this below - modify by adding domain to http://www/
script src="http://www/js/edit_area/edit_area_full.js
Handy, I’ll probably use this going forward on my site. Thanks.
My main quible with TextArea text editor at the moment is that the font type is a little smudgy – it’s not as clean as what the default EE font is in its template text area. I know this sounds ticky tacky but I work in these editors a lot and something like that really makes a difference. I wonder if that font type can mirror what EE uses?
– EDIT ADD: in edit_area_full.js doing a search for “monospace” you can swap out that font for one of your own choices. It appears that EE templates by default use “Lucinda, Verdana, san serif.” To also mirror EE’s default template font size: in edit_area_full.js search for:
font_size: "10"
and change “10” to “8.” In addition to changing the font family to Verdana (my personal choice) I also changed the font color to mirror EE’s default styles by adding “color: #333;” here:
body, html, table, form, textarea{font: 12px Verdana, sans-serif; color: #333;}
–
The full screen editor mode is very nice btw.
Also noted in the todo.txt file in the TextArea zip:
/*** Compatibility ***/ Supported browsers: Firefox 1.5 & 2 IE 6 & 7 Opera 9 No more supported: Netscape 8 with rendering mode IE Mozilla 1.7 (buggy) Safari will wait until I can test it and debug it on a mac
Yeah, i think the line wrap is the deal breaker for me here because I tend to have multiple windows open when I work and it’s unproductive when I have to scroll sideways so much with it. I hope we could figure that out.
==
EDIT ADD: Ok so in the documentation it doesn’t mention world wrap anywhere so I’m thinking it doesn’t have that functionality built in natively. So, I came across that you can set the “dispay” to “later” which means that it would not load the editor unless you toggle the “Toggle editor” check mark. Essentially EE stays as the primary editor and EditArea can be engaged after page load with the toggle. I figure if isn’t my default editor I can still use it in full screen mode when it’s the only thing I’m working on and need extra space. Also, by changing “fullscreen” to true - it will load in fullscreen mode automatically and then can be toggled back if you want to go back to regular size. Those were my two changes I made, making it the secondary editor and then entering full screen mode automatically. Again, though, with this extension enabled I noticed that even EE’s line lengths get much much longer even when Edit Area is not toggled on. That’s a little strange.
I also emailed the contact at the EidtArea page about line wrap capabilities but not sure if I’ll get a response - the webform was in french.
I have a question regarding the loading of the [removed]
in the extension this line:
if($IN->GBL(‘M’,’GET’) == ‘edit_template’ || ‘update_template’) {
As far as I understand this should check if we are in the template area and only then inject the script headers….unfortunately the JS header are injected in the entire CP and the script throws an error since it can’t find a field with the given ID… Plus all the editors (no access to the templates) are loading an additional 120kb of script.
What seems to be wrong with that line?
Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.