Edit textarea with Vi in any browser

25 Jan 2009 18:22 | 0 comments | 0 pingbacks | , ,

I prefer to use Vi for my day to day programming tasks. When I’ve installed this blog, I’ve tried to use a textarea in the Django admin in order to write new posts. While, it is possible, it is not as convenient as writing them with Vi. If I used Firefox as my browser of choice, the solution would be quite simple: Mozex. It is a nice simple Firefox extension which allows you to use any external editor to edit content of your textares.

But my favorite browser is WebKit Nightly. It is fast, supports advanced CSS and passes Acid3 test. It also has a Web Inspector — analog of Firebug, built right into the browser. Luckily, there is a simple Javascript implementation of Vi.

Several lines of code, and it is in my Django admin.

apps/blog/admin.py

class PostAdmin(admin.ModelAdmin):
    class Media:
        css = {"all":(settings.STATIC_URL + 'vi/vi.css',)}    
        js += (settings.STATIC_URL + 'vi/vi.js', settings.STATIC_URL + 'vi/vi_attach.js',)

vi_attach.js

window.onload=function(){
  var ta = document.getElementById('id_text');
  var label = ta.previousSibling;
  while (label.previousSibling && label.nodeName == "#text") {
      label = label.previousSibling;
  }
  label.innerHTML+='<br /><a href="#" onclick="editor(document.getElementById(\'id_text\'));'+ 
                   'return false;">Edit with vi</a>';
}
Add post to:   Delicious Reddit Slashdot Digg Technorati Google
Make comment

Comments

No comments for this post

Required. 30 chars of fewer.

Required.