ActiveState Community

HTML Toolkit

Posted by stan on 2009-04-12 14:50 | Staff Pick!
0.8.2.1
Stan Angeloff
Tue, 2009-06-30 03:06
  • : 5.0 - 5.*
  • : 5.0 - 5.*

A growing collection of tools to help you edit & author HTML/XML documents.

What it does:

  • Auto-complete HTML/XML tags. Knows all about HTML 4/5 and won't auto-complete invalid tags. Recognises block (<div>, <blockquote>, etc.) and empty elements (<hr />, <embed />, etc.) and completes accordingly
  • Quickly convert word under cursor to a tag by pressing Ctrl+>
  • Default snippets for most common HTML that don't get in the way
  • Insert &nbsp; entities by pressing Shift+Space
  • Create new list items, table rows, columns, etc. just by pressing ENTER
  • Wrap selection/current line in a tag by pressing Ctrl+Alt+W

  • Navigate around closing tags by pressing TAB/Shift+TAB to go back
  • Preview images in CSS files by holding down Ctrl and moving the mouse pointer over a `url(…)`

NEW in 0.8:

  • Turn any word/selection into a hyperlink using Google (Ctrl+Shift+Alt+L)
  • Insert <br /> lines on Ctrl+Enter
  • Markdown Preview pane (under Toolbox)

How to Install?

  • Download the XPI file
  • Fire up Komodo 5
  • Select Tool -> Add-ons -> Extensions
  • Drag and drop the XPI file onto the Add-ons window
  • Wait and confirm the installation

You must restart Komodo for changes to take effect.

Source code is available on Google Code.

Suggestion
adam | Fri, 2009-05-08 03:02

Hi,
It's really great extension, thanks.
One small suggestion: it would be great to allow users to configure what tools to use e.g. if I want to write divs without auto completion, I'm going somewhere and I just tick it off.

Thanks

@adam
stan | Fri, 2009-05-08 03:10

Adam,

Glad you like the extension, thanks. You can log your suggestion in Google Code and we will consider it in future releases. Once the extension is mature enough, we will provide preferences to control how it should behave.

Regards,
Stan

Hey Stan, Found a pretty
nathan | Mon, 2009-05-11 08:33

Hey Stan,

Found a pretty annoying bug in your addon;

When editing an XML, I have (for example) the following line:

<event id="test"| />

"|" is where the cursor is.

When I press TAB, the cursor ends up at the end of the line, rather than placing a TAB character

<event id="test" />|

The only workaround is to ctrl+v the TAB character.

Oh, and about this new feature:

Turn any word/selection into a hyperlink using Google (Ctrl+Shift+Alt+L)

You should seriously consider using a shorter shortcut :p

Edit:

Suggestion for the google hyperlinking feature: In languages other than the ones supported now, have the resulting URL copied to the clipboard instead..

The bug you are describing
stan | Mon, 2009-05-11 08:43

The bug you are describing is the jumpClosingTag command being triggered. It works both when you are inside empty tags, as in your case, as well as when the cursor is placed before a </closing tag> We will consider making this optional in future versions.

RE: Google, it's a good idea, but I am not sure it adds value outside of HTML documents, but it won't hurt having it around I guess. Komodo already has a lot of keys reserved, thus the key binding being so long.

Cheers.

Please either use a
nathan | Mon, 2009-05-11 08:56

Please either use a different shortcut for jumpClosingTag or as you said, make it optional.. it's a pretty big annoyance on my side since I used tab characters quite frequent in XML files.

As for the google links, wouldn't it be possible to simply make the shortcut customizable? (under the Editor -> Key Bindings section).

Either way I'm sure you can come up with something shorter than ctrl+shift+alt+L :p (ctrl+alt+L is available).

Edit:

Damn I always forget to press "reply" -.-

Quick RE: you can customise
stan | Mon, 2009-05-11 09:01

Quick RE: you can customise the key binding under Edit -> Preferences -> Editor -> Key Bindings -> Editor: Create Hyperlink for Word/Selection

Plans for 1.0 are to allow the user to enable/disable each command as well as the option to assign a custom key (instead of using the `Key Bindings` interface).

id
goran | Wed, 2009-06-10 05:57

Can the auto insertion of the id attribute for block level elements be turned off? Right now, every time I complete a < div > it not only closed it, but also adds an id= " ".

Yes, you can edit the DIV
stan | Wed, 2009-06-10 06:17

Yes, you can edit the DIV abbreviation in your Toolbox under Sample Abbreviations -> HTML -> div or just delete it and a default one will be used instead.

re: yes you can...
goran | Wed, 2009-06-10 06:34

Hey thanks for the quick reply, but I'm not sure what you mean. Under Toolbox > Samples (5.1.3) I have a bunch of import/export options I don't really know what do.

Re: yes you can..
goran | Wed, 2009-06-10 06:41

Oh I got it. View > Toolbox tab.

newbie needing help
kklickman | Wed, 2009-06-10 10:37

Is there a getting started guide somewhere? I'm feeling like a complete idiot--I'm trying to figure out how to link to another HTML page in the same directory (and browsing for the file name, not typing it), and I'm stumped. I'm sure it's completely obvious, but I could really use some HTML Toolkit 101 type documentation.

Thanks!

Karen

Karen, I am a bit unsure
stan | Wed, 2009-06-10 11:50

Karen,

I am a bit unsure what you are after here, but the current version does not support browsing for files in the current directory. You'd have to manually type (or copy -> paste) the file name.

Cheers,
Stan

Wrap selection/current line in a tag
outsidethebox | Sun, 2009-06-14 11:11

First of all: totally awesome add-on!

The above feature splits everything over multiple lines. Is there any way to modify it so that it simply wraps my selection in the tag without inserting line breaks.

Thanks!
Michael

Thanks for the feedback
stan | Mon, 2009-06-15 10:21

Thanks for the feedback Michael, I will consider tweaking the command to work on single line selections for the next release (no date planned as of yet).

Cheers,
Stan

Thanks, Stan!
outsidethebox | Mon, 2009-06-15 11:10

Thanks, Stan!

<script type="application/x-javascript">
ggerri | Thu, 2009-08-06 00:22

Hi, very nice extension :-)

One thing: writing the script tag, it completes to "application/x-javascript". Is it possible to change this behavior, so it completes to "text/javascript" as this mostly used and well supported?

I've learned that RFC4329 standardized the the "text/javascript" type because it is in common use but also marked it as obsolote as JS code doesnt represent a text document. So it recomends "application/javascript" (without the 'x') instead. But this is said not to be well supported yet.

W3 does not list "application/x-javascript" but "application/javascript" as an option:

http://www.w3schools.com/tags/html5_script.asp

So maybe "text/javascript" is still the savest option at the moment...

Regards
Gerald

Hi Gerald, Thanks for
stan | Thu, 2009-08-06 01:15

Hi Gerald,

Thanks for getting in touch. The built-in <script> snippet uses text/javascript. If you are getting application/x-javascript, you have another snippet in your Toolbox under the 'script' name. Look under Samples -> Abbreviations -> HTML or just Abbreviations -> HTML. You can remove the script snippet from there and the built-in one will be used instead, or you can edit it to your desire.

On a side note, the new release which is coming, well soon I hope, will report which snippet has been triggered so you can easily trace it to its origins and edit accordingly.

Cheers,
Stan

Two Thumbs Up
andrewabogado | Tue, 2009-10-13 20:31

Blew me away with its amazing features and made me more productive.

Kudos to the developers.

I second the praise. :)
andersonmedia | Sun, 2009-11-01 13:26

Just wanted to leave another note of appreciation, very, very helpful addon. Thanks!

Could this work within php??
tpk | Sun, 2009-11-15 14:05

Great relief, this tool!!!

I'd find it great, if it would also work within <?php echo ""; ?>

Thomas