ActiveState Community

HTML editing, img tag expansion, etc

Posted by ronnyadsetts on 2008-10-09 09:39
OS: Windows XP Pro

Hi,

I'm trying to phase in Komodo Edit (and later IDE for our PHP devs) as our HTML editor to replace Homesite that Adobe seem to have lost all interest in developing further.

In general Komodo works fairly but is missing a few of the things Homesite was good at. The point of my posting here is to find out if:

a) there are ways of doing what I can't that I'm somehow missing
b) there are future plans for the functionality

The main things that are painful when using Komodo as an HTML editor are:

* HTML attributes should have quotes when expanded with Komodo's completion (http://bugs.activestate.com/show_bug.cgi?id=75533)

* There's no way that I could find to populate width and height attributes by getting the data from the image file

* When editing PHP files (and other languages), there's no HTML tag completion (there's a ticket somewhere on this I think but I can't find it now)

If anyone could provide pointers on how to workaround the painful things, that would be much appreciated.

TIA,
Ronny Adsetts

Couple of comments....
ericp | Fri, 2008-10-10 12:21

I reported the quotes on attr values bug, so I agree.
We've been busy on the v5 release, but should get to the
major codeintel issues soon.

It's not hard to write a macro to insert the width and
height attributes. Something like this would do it:

var view = ko.views.manager.currentView;
var scimoz = view.scimoz;
var currentPos = scimoz.currentPos;
var currentLine = scimoz.lineFromPosition(currentPos);
var lineStartPos = scimoz.positionFromLine(currentLine);
var lineEndPos = scimoz.getLineEndPosition(currentLine);
var text = scimoz.getTextRange(lineStartPos, lineEndPos);
if (/<img.*src=["'](.+?)["']/.test(text)) {
    var url = RegExp.$1;
    var img = new Image();
    img.src = url;
    var newText = (' height="' + img.height + '" ' +
                   ' width="' + img.width + '"');
    scimoz.insertText(lineEndPos, newText);
} else {
    alert("Can't get image info from URL '" + text + '"');
}

// Test line.  Put the cursor somewhere on this line, run the macro.
// <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/WhiteandKeynes.jpg/200px-WhiteandKeynes.jpg"

var view = ko.views.manager.currentView;
var scimoz = view.scimoz;
var currentPos = scimoz.currentPos;
var currentLine = scimoz.lineFromPosition(currentPos);
var lineStartPos = scimoz.positionFromLine(currentLine);
var lineEndPos = scimoz.getLineEndPosition(currentLine);
var text = scimoz.getTextRange(lineStartPos, lineEndPos);
if (/<img.*src=["'](.+?)["']/.test(text)) {
    var url = RegExp.$1;
    var img = new Image();
    img.src = url;
    var newText = (' height="' + img.height + '" ' +
                   ' width="' + img.width + '"');
    scimoz.insertText(lineEndPos, newText);
} else {
    alert("Can't get image info from URL '" + text + '"');
}

// Test line.  Put the cursor somewhere on this line, run the macro.
// <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/WhiteandKeynes.jpg/200px-WhiteandKeynes.jpg"

I have no problem getting HTML code-completion in PHP files. PHP files
are multi-language, so the HTML completion only occurs outside
the <?php ... ?> tags.

Thanks for the pointers on
ronnyadsetts | Mon, 2008-10-13 11:22

Thanks for the pointers on macros, that's a great help.

This macro almost works!
synaesthetic | Thu, 2009-04-30 20:40

This macro almost works! Instead of giving me an error it tries to make every image width="0" and height="0"

I am trying to figure it out but if anyone knows a solution I'd be very grateful!

This macro still had a typo in it
ericp | Fri, 2009-05-01 09:40

I just corrected it -- lineStartPos should be set to scimoz.positionFromLine,
not ...lineFromPosition.

The macro should only work on the img tag on the current line. In fact,
it should work only on the tag at the current position, but we can leave
improving that as an exercise for the reader.

However, if you're getting (0, 0) inserted, could you put an alert
for img.height and img.width? I would say if one of them is 0, the
macro shouldn't do the insertion. I don't know why that would happen
though, unless the URL is unresolvable.