Geertjan's Blog

  • August 14, 2006

Support for HTML Image Tags in the NetBeans Editor

Geertjan Wielenga
Product Manager
In a fair world, when you're working with HTML files, you'd be able to select a line that consists of the following:


And then, after clicking a keyboard shortcut, you would suddenly—as if by magic—see the line above transformed into the line below:

<img src="../images/mypic.gif" border="1">

When working with HTML files, either for tutorials or help files, the messing around with GIF files and PNG files, i.e., getting those tags right and kind of fiddling around with them, is one of the most frustrating parts of my job. But, that frustration is about to come to an end. I now have a shortcut (Ctrl-Alt-J) that turns my naked image text into a beautiful HTML tag, exactly as shown above. However, not all my image files go into the same folder...

...therefore, simply providing a keyboard shortcut would not be good enough. So, in my toolbar I have a new drop-down list with display names for all the folders that potentially contain images:

Now I just need to choose an image folder from the list and then the correct src attribute is generated whenever I press the keyboard shortcut. However, it isn't very nice to hard code the values of my image folders into the module. That would mean that I wouldn't be able to share it with anyone. So, after asking Ramón Ramos's permission, I adapted the Options window that he used for setting search engines for his cool WebSearchEngines module:

There are still several open issues, but once it is finished, it may end up being the module that I will make the most use of in my day to day work with the IDE's HTML Editor, when writing tutorials and help files.

Join the discussion

Comments ( 2 )
  • Alan Petersen Tuesday, August 15, 2006
    This is nice, but the ../images/ URL is pretty limited (such that it is only relevant to documents within the base URL). When this occurs in a JSP, you often don't know the location of the dispatching servlet. For example, a servlet that is called using the URL


    dispatches to a JSP in the /WEB-INF/pages directory. The relative URL ../images would then get mapped to

    which is most certainly wrong.

    I prefer an image URL that looks like this:


    instead. This way the URL is absolute, from the web context, without having to worry about the depth of the URL of the calling page.
  • Geertjan Wednesday, August 16, 2006
    Hi Alan! Firstly, the module I'm creating here only has HTML files in mind, not JSP files (although making it available to JSP files is as simple as changing one line of code). Secondly, if you want the src to contain a variable, you can just put the variable in the Image Folders panel of the Options window. I mean, if you look at the "Location" textfield --- that could contain ANYTHING. Whatever you put there is prepended to the name of the image and makes up the <tt>src</tt> attribute. Does this make sense or have I missed something?
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.