soo_editarea: EditArea integration with Txp tag highlighting

jsoo · 2010-12-20 23:37:07

EditArea is a JavaScript-based code editor for browser textareas. Features include:

Code highlighting
Browser tab-key override for proper tabbing in the textarea
Full-screen mode
Find & replace w/ regex support
Multiple undo/redo

soo_editarea provides easy integration of EditArea into Textpattern. (Well, pretty easy: there are a few steps involved.)

Features:

You can set plugin preferences for:

Syntax language for Page & Form editing, allowing custom syntax file
Source path, making it easier to share one EditArea installation across multiple sites
Various EditArea options (tooltip language, font size & family, &c.)

Available at http://ipsedixit.net/txp/124/soo_editarea

Version History

0.1.5 (2012/01/24)
- Added pref for EditArea plugins (as requested by mrdale)
0.1.4 (2011/04/27)
- Added default height/width prefs (as requested by mrdale)
0.1.3 (2010/12/30)
- Fixed bug with Internet Explorer (type attribute in script tag)
- General code cleaning
0.1.2 (2010/12/20)
- More preference options (tooltip language, font size & family, tab-to-space conversion)
0.1.1 (2010/12/20)
- Documentation update [thanks to Marc C. for the suggestions]
0.1.0 (2010/12/20)
- EditArea integration for Txp’s Page Template, Form, and CSS editors

— Suggested by the (apparently defunct) atb_editarea plugin, and discussion on the Txp forum.

Last edited by jsoo (2012-01-26 01:10:08)

maruchan · 2010-12-20 23:59:24

Wow, thanks! Just got it all working, great plugin.

The only part that I kind of misunderstood at first revolves around the separate txp syntax instructions:

To have Txp tags appear in a different color, add a new syntax file at edit_area/reg_syntax/. (Whenever you upgrade the EditArea files you will have to remember to preserve this file.) Then change the soo_editarea option for Page Template & Form syntax (the installation instructions tell you how to set plugin options).

What I did:

download txp.js and put it in the reg_syntax subfolder
install soo_plugin_pref
click on the soo_editarea plugin’s “Options” link and
type “txp” in the “Page Template and Form Syntax” box.

That got the Textpattern tags highlighted in a different color. Nice :-)

jsoo · 2010-12-21 00:16:28

Thanks Marc; I’ll amend the instructions to make this clearer.

Edit: Done, and released version 0.1.2 with more options.

Last edited by jsoo (2010-12-21 02:49:32)

the_ghost · 2010-12-21 08:38:54

Could you share a screenshot?

jsoo · 2010-12-21 13:43:29

the_ghost wrote:

Could you share a screenshot?

Added screenshots to info page.

Or try the EditArea demo.

GugUser · 2010-12-21 14:33:28

In Safari Mac the letters are blurred and unreadable, the same in iCab, in Google Chrome it is sharp.

jsoo · 2010-12-21 14:49:00

GugUser wrote:

In Safari Mac the letters are blurred and unreadable, the same in iCab, in Google Chrome it is sharp.

This is a known issue with EditArea and Safari. You can hack EditArea (as suggested in that link) or have Safari spoof a different user agent. It may also be possible to solve this with CSS, but I haven’t looked into it closely. Admittedly, that would probably be the cleanest solution.

iCab is also a WebKit browser so the solution is probably the same. (I haven’t used iCab for about 10 years so I don’t know.) OmniWeb is yet another WebKit browser, that works as is with EditArea. Oddly, though, the above hack fixes Safari but then makes OmniWeb blurry. (However, with OmniWeb it is easy to spoof different user agents on a per-domain basis.)

hcgtv · 2010-12-21 17:37:20

Jeff, this looks good, thanks.

GugUser · 2010-12-21 22:11:05

In fact, by changing the user agent (in the same Safari), the quality of the characters is better. The best result is obtained if Safari faked to be Opera. Strange behavior of Safari.

joebaich · 2010-12-22 00:15:02

Very nice! Easy to set up and it works well for me, I usually use Firefox or Chrome TXPing.

Well done Jeff, and just in time for Christmas too.

jakob · 2010-12-22 09:25:54

Truly a great improvement but that display bug in Safari is dreadful. Even with the User Agent changed, the display still seems to start diverging when changing the text size (I then get double lines showing beneath each other).

Out of interest, would perhaps codemirror be a viable alternative in this respect? It hasn’t got all the bells and whistles of EditArea but it’s pleasingly lean compared with EditArea and, to me at least, seems quite a bit faster.

jsoo · 2010-12-22 13:53:57

CodeMirror looks like a nice project. Its mixed-language mode is a major advantage over EditArea for certain applications, but I didn’t see it as important to Txp. Maybe, if Textile syntax highlighting were possible, because then you could have mixed Textile/Txp highlighting in the Write panel. Textile parsing is not feasible in EditArea, AFAICT, but, from a glance at a CM parser file, looks like it might be possible there. Then again, mixed Textile/Txp parsing would probably take some work to get anywhere near robust.

So far I find EA sufficiently snappy that I don’t really notice the lag.

I see what you mean about changing the text size when using the user-agent workaround. The EA/Safari hack I linked to works correctly. Obviously a hack isn’t ideal in that you have to redo it on every upgrade, but EA doesn’t seem to be updated all that often. And, with the hack, I can still use OmniWeb with user-agent spoofing, and text resize works. (I learned all this working with Sam’s new project, which includes this hacked version of EA.)

Textpattern CMS

Textpattern CMS support forum

#1 2010-12-20 23:37:07

soo_editarea: EditArea integration with Txp tag highlighting

#2 2010-12-20 23:59:24

Re: soo_editarea: EditArea integration with Txp tag highlighting

#3 2010-12-21 00:16:28

Re: soo_editarea: EditArea integration with Txp tag highlighting

#4 2010-12-21 08:38:54

Re: soo_editarea: EditArea integration with Txp tag highlighting

#5 2010-12-21 13:43:29

Re: soo_editarea: EditArea integration with Txp tag highlighting

#6 2010-12-21 14:33:28

Re: soo_editarea: EditArea integration with Txp tag highlighting

#7 2010-12-21 14:49:00

Re: soo_editarea: EditArea integration with Txp tag highlighting

#8 2010-12-21 17:37:20

Re: soo_editarea: EditArea integration with Txp tag highlighting

#9 2010-12-21 22:11:05

Re: soo_editarea: EditArea integration with Txp tag highlighting

#10 2010-12-22 00:15:02

Re: soo_editarea: EditArea integration with Txp tag highlighting

#11 2010-12-22 09:25:54

Re: soo_editarea: EditArea integration with Txp tag highlighting

#12 2010-12-22 13:53:57

Re: soo_editarea: EditArea integration with Txp tag highlighting

Board footer