ActiveState Community

HTML Toolkit

Posted by stan on 2009-04-12 14:50 | Staff Pick!
1.0.1
Stan Angeloff
Sun, 2009-11-29 06:11
  • : 5.0 - 6.*
  • : 5.0 - 6.*


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

  The Tab Abbreviations add-on has been merged into HTML Toolkit. Please uninstall Tab Abbreviations to avoid compatibility issues.

What it does:

  • ‘>’ — auto-complete tag; knows all about HTML 4/5 and won't auto-complete invalid tags; recognises empty elements (<hr />, <embed />, etc.) and completes accordingly
  • ‘Ctrl + >’ — convert word under cursor to a tag
  • ‘TAB’ — expand abbreviation or convert word under cursor to a tag if no matching snippet is found
  • ‘Shift + Space’ — insert &nbsp; entity
  • ‘Ctrl + Enter’ — insert <br /> tag and move caret to a new line
  • ‘Shift + Enter’ at line-end — create new list item, table row, table column, etc.
  • ‘Ctrl+Alt+W’ — wrap selection/current line in a tag
  • ‘TAB/Shift+TAB’ — jump before/after closing tag
  • ‘Ctrl & mouse over’ — preview url(…) images in CSS files
  • ‘Ctrl + Shift + Alt + L’ — turn word under cursor/selection into a hyperlink using Google
  • ‘Ctrl + Alt + D’ — duplicate line as template
  • Lorem Ipsum generator:
    type: lipsum followed by either .chars, .words or .paras and *times e.g.
    lipsum.words*100[press TAB] will produce a paragraph with 100 Lorem Ipsum words
  • Markdown & Wiki preview panels

How to Install?

  • Download the XPI file
  • Fire up Komodo 5
  • Select Tools -> 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.

What's in it for Developers?

The new 1.0+ version allows developers to add custom abbreviations providers. The Lorem Ipsum generator is an example of such a provider. You can develop your own to automate common tasks. There is no documentation at this point, but the code should be easy to follow.

HTML Toolkit is modular. You can add your own commands and take advantage of the tools already available. Browse the source code below and ask any questions you might have!

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

Tag Wrapping
stuarth | Tue, 2009-12-01 03:39

Agree - very useful extension.
I have an issue with the tag wrapping feature on OSX where using it prevents me moving on to wrap other content.The initial

tags can be changed while they are still red and the text content becomes gray. The tags remain red and I have to save the file and close it to add further tags.

I'm sure this is a user issue so would like guidance please. I have just upgraded to the latest version 1.0.1 which I am running in Komodo Edit 5.2.3, build 4312.

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

Tag Wrapping
stuarth | Tue, 2009-12-01 03:42

Apologies - I posted this above as a reply by mistake.

I have an issue with the tag wrapping feature on OSX where using it prevents me moving on to wrap other content.The initial

tags can be changed while they are still red and the text content becomes gray. The tags remain red and I have to save the file and close it to add further tags.

I'm sure this is a user issue so would like guidance please. I have just upgraded to the latest version 1.0.1 which I am running in Komodo Edit 5.2.3, build 4312.

Have you tried tabbing out
stan | Tue, 2009-12-01 04:40

Have you tried tabbing out of the wrapped area (to do so, just press TAB)? I am not sure if this is helpful, but let's start with the basics.

Thanks
stuarth | Thu, 2009-12-03 03:53

Hi Stan - thank you.

Did you hear the sound of my hand slapping my forehead?

Ah, so that's what it was !
stan | Thu, 2009-12-03 04:12

Ah, so that's what it was !

Hi stan, thanks for your
pepebedesign | Thu, 2009-12-24 02:32

Hi stan, thanks for your hard work!

Today I have stumbled over an article about Zen Coding. That might be interesting for you . Read it here: http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write...

I'm well aware that we already have some of the functionality of this thing with HTML Toolkit but this goes one or more steps further.

Have a look at the video: http://vimeo.com/7405114.

There is js Zen coding Package for Aptana available here: http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Apt...

Is there any chance that we can see a ZEN HTML Toolkit in 2010?

Regards,

pepebe

Hi pepebe, Another community
stan | Thu, 2009-12-24 08:37

Hi pepebe,

Another community member has already released an extension for Komodo to support Zen Coding: http://code.google.com/p/zen-coding/issues/detail?id=24

I don't plan on adding built-in ZC support in HTML Toolkit at this point. If anyone is interested in contributing to the project following the existing code guidelines, I'd be more than happy to review and include the add-on.

Cheers,
Stan