Notepad++ HTML editing tag insertion (surround) plugin
I use Notepad++ for my text editing need. To write my blog entries, I’m even handcoding my HTML using it!
It has neat features that makes it superior to Notepad such as a tabbed interface, internationalization (Unicode support and UI translations), and lots of text manipulation tools (HTML escaping, to name one).
One essential feature I miss when editing HTML using it is the tag wrapping functionality. That’s what the buttons in Wordpress’ HTML mode do:
After asking around in the forum, I finally found the plugin I needed for Notepad++, WebEdit.
WebEdit 1.0 installation
You might want to check whether a newer version has been released from the forum thread. To download version 1.0, the newest at the time of this writing, use one of the following mirrors:
- rapidshare
- disk.tom.ru
- Agronesia (yes, this server)
There are many files inside the zip file. What you need to do is to put WebEdit.dll inside Notepad++’s plugins directory, such as C:\Program Files\Notepad++\plugins. After that, put WebEdit.ini inside Notepad++’s plugin config folder. It might be inside the user’s folder such as C:\Documents and Settings\Agro\Application Data\Notepad++\plugins\config, or it might be inside Notepad++’s installation folder such as C:\Program Files\Notepad++\plugins\Config if Notepad++ is installed in “portable mode”.
Run (or restart) Notepad++, and you will find the oh-so-needed new plugin under the Plugins menu:
The usage is dead simple. Select a block of text, and choose the tag you want to surround it with.
More tags and shortcut keys
To add your own HTML tags, just open the WebEdit.ini file mentioned before. Then add a new line using the following format:
MENU_NAME=LEFT_WRAP|RIGHT_WRAP
For example, to add the <a> HTML tag, you want to use this:
&Link=<a href="">|</a>
The ampersand (&) indicates the menu accelerator. After that just choose Load Config from WebEdit’s menu (or restart Notepad++).
To add shortcut keys, just go to Settings - Shortcut Mapper - Plugin commands. However note that they will all be buggily named “not used”, so you must check which is which from the Plugins menu itself. For example, you can add the shortcut key Ctrl+Alt+A to insert the <a> tag.
My wishlist
One additional feature I need dearly is for the plugin to ask some variables before inserting a tag. For example, using this kind of syntax:
&Link=<a href="{1:Destination URL}" target="{2:target}">|</a>
The plugin should ask me in a dialog box like so:
And use the values I provided to substitute the curly brackets. Yea, similar to inserting the <a> tag using Wordpress.
Tags: code, command, download, edit, free software, gpl, html, insert, n++, Notepad++, npp, open source, plugin, shortcut, source, support, surround, tag, text editor, view, wrap
June 7th, 2008 at 10:33 am
This is fantastic! I’ve been wanting this functionality in N++ for a long time. Thank you for the tutorial, I’m putting this in my del.icio.us bookmarks.
June 7th, 2008 at 4:04 pm
I’m glad that you found it useful. You also reminded me to install that del.icio.us plugin on this blog :). Expect some delicious buttons soon.
June 8th, 2008 at 4:08 pm
Thanks for the feedback. I released the plugin v.1.1 yesterday, fixing (sort of) the bug you mentioned. Cf. the SourceForge forum for details and comments.
June 9th, 2008 at 6:31 am
Thanks a lot for the update. I’m looking forward for future versions.
Btw, it’s really cool that you use a non-mainstream language, Oberon :).
June 9th, 2008 at 12:41 pm
Don Ho, the Notepad++ developer, just recently replied me, saying that he will do what I asked for to better support the dynamic menu in my plugin. I will be able to display the actual function names in the Shortcut Mapper instead of the “WebEdit Slot…” text. It will be fixed in the upcoming Notepad++ 5.0 and later (alpha release is planned within a few hours from now).
As to the Oberon language, I really liked it for its simplicity, as well as full OOP support. Plus, it’s the first ever fully compiled language to support automatic garbage collection (much like the SmallTalk or Java, but without the performance issues), which helps greatly in developing comlex systems, because you don’t have to worry about the memory leaks, dangling pointers and such. After 10 years of developing in Delphi I decided to switch. In November 2007 I found my new job at Amadeus IT Solutions, and now I’m developing in Oberon full time, using the XDS free optimizing compiler. : )
WebEdit is a side step, which I did while studying the plugin system and Scintilla. What I’m actually doing is trying to turn Notepad++ into full-featured Oberon IDE, so a part of my time goes to the Obide plugin (not published yet). It already has some basic support for intellisense, code navigation and compiler integration. All these things are really possible for a single developer, because the language has a quite simple and consistent syntax : )
July 22nd, 2008 at 5:16 am
This is exactly what I’ve been looking for but I cannot get it to work. I’m on v1.3.1 of the plugin which was updated July 10th, but it’s still a no-go. The plugin itself may work — it shows up in the menu properly — but the WebEdit slots are all empty and grayed out.
Even the default WebEdit.ini doesn’t work. I tried salting the config file in four separate places just to see if one of them got a hit, but none of them worked. I’ve now got copies of WebEdit.ini in npp/, npp/config, npp/plugins, and npp/plugins/Config, but the slots stay inactive.
Help! :[
July 22nd, 2008 at 6:25 am
@Coheed
I’m using WebEdit 1.3.1 with npp 4.9.2 and it’s working fine here.
Most probably you didn’t put the WebEdit.ini file in the correct place. Did you try putting it inside “Notepad++\plugins\config” of your Application Data file? (e.g., not the one under “Program Files”, but on the folder such as “C:\Documents and Settings\Coheed\Application Data\Notepad++\Notepad++\plugins\config”)
July 22nd, 2008 at 10:28 am
Bah. Well that was an ease enough fix.
The readme said nothing about Application Data initially. What it says is ‘The configuration file is looked for in the standard plugin configuration folder of the Notepad++ (if Notepad++ is installed in portable mode, the folder is “Notepad++\plugins\Config”).’
Since that folder existed under Program Files I thought that’s where the config was meant to go. D:
October 30th, 2008 at 2:43 am
I already really liked Notepad++ for HTML editing. The tag-wrap function was the only thing about it that I thought was lacking. Really quite happy about this! Thanks for your hard work!
November 10th, 2008 at 2:19 am
[...] WebEdit, molto ben descritto nella sua installazione e funzionamento in un blog. [...]
April 2nd, 2009 at 10:44 pm
There is obviously a lot to know about this. I think you made some good points in Features also.
April 28th, 2009 at 5:37 am
Great plugin! One thing that would complete my move from good old Homesite would be the ability to wrap HTML around multiple items. In HS you can selectet a couple of lines and with a right click turn them into a , or add line breaks to the end of each line. Being able to turn tab delimited text into s would be awesome.
April 28th, 2009 at 5:38 am
[Oh crap, tags stripped out of course. Once more:]
you can selectet a couple of lines and with a right click turn them into a <ul>, <ol> or add line breaks to the end of each line. Being able to turn tab delimited text into <table>s would be awesome.
July 17th, 2009 at 2:01 pm
Thank you very much for making this post…this directed me to exactly what I was looking for so thanks again for the link.
August 20th, 2009 at 11:38 am
Excellent. thanks!
January 13th, 2010 at 5:49 pm
It won’t work for me!
I put the files on my dir “C:\Program Files\Notepad++\plugins”
and the INI file and images in the “config” dir, and I see the plugin Toolbar. screenshot: http://www.flickr.com/photos/99632138@N00/4271437732/sizes/o/
July 15th, 2010 at 7:56 pm
Great thanks! really time saver.