VIEDIT

Vi enhanced editing of a html textarea

A lot of websites are using textareas inside html forms. Killer applications are web based email clients, weblogs (blogs) or wikis. Because web browsers and http/s support are availiable everywhere and an increasing number of editing services are offered based on websites with html forms and textareas.

One big drawback of textareas is the absence of extended commands and features. So it would be nice, if there are more features witch make users life more efficient. Examples include edit commands known from other tools, or commands for navigation and text handling. If these features could be implemented in a browser-known scripting language, these new features can be provided without any further software installation.

Vi commands in a textarea written in ECMAScript

A widely used programmer text editor is the editor Vi. A lot of people know at least some commonly used Vi commands. Advantages of a Vi enhanced editor in a html form environment are the abandonment of complicated menus and navigation elements which reduces the operating expense to a minimum. The website included the textarea need not to be changed and the implementation could be transparent. The user can edit the textarea as usual and after an escape key is pressed an extended command mode is availiable.

At the moment only some helpful Vi commands are implemented. Everyone is highly recommended to adding his or her own Vi commands. I would be pleased if you send me the extended code.

Download

You find the latest version of the scripts for Mozilla/Firefox here (click right, save as).
Other Browsers are not supported or tested at the moment.

Installation

Integration in your current web application is really easy. Only link to the script with

  <script type="text/javascript" src="viedit.js"></script>

and activate it with

 <body onload="vieditEnable();">

or by

 <script type="text/javascript">
  window.onload=vieditEnable;
 </script>

The unique index used to store the settings is based on the path of the website the id of the textarea and the values of input fields with a viedit attribute:

 <input type="hidden" value="1234abcd" viedit>

Example

Features and commands

Key(s)
¶=[Enter] Mode
C=Command, E=Edit Description

not [ESC] E Normal edit in textarea

[ESC] E Change to command mode.

[ESC] C Reset command buffer.

i or [ins] C Left command mode; change to normal textarea edit mode.

/regexp ¶ C Find regexp. Start at first character. more info

n C Repeat last / search. Start at current cursor position.

?regexp ¶ C Search in reverse for regexp. Start at end of text. more info

N C Repeat last ? search. Start at current cursor position.

:w ¶ C Ask for form submit.

:w! ¶ C Submit form.

:set ic ¶ C Ignore case when searching.

:set noic ¶ C Don't ignore case when searching.

:s/regexp/str/opt ¶ C Search regexp and replace it with str. opt can be g for global changes, or i for ignore case. more info

& C Repeat last :s command (if opt not included g)

% C Search to beginning or ending of balancing ( ) [ ] { } < > and select content.

u C Undo last :s command (max. buffer size 20)

R C Redo last u command

x C Delete charater at cursor position.

G C Caret to begin of last line.

$ C Caret to end of line.

Feature Mode Description

Remember status C,E After the site is loaded, several status information are restored:
cursor position

highlighted selection area

last regexp for searching

last regexp for search and replacing

edit mode (C/E)
Status is stored during the last submit.

Index for status remembering C,E Values of input (also hidden) form fields with the attribute viedit are used to create a unique index for saving the status information.

Key(s) ¶=[Enter]	Mode C=Command, E=Edit	Description
not [ESC]	E	Normal edit in textarea
[ESC]	E	Change to command mode.
[ESC]	C	Reset command buffer.
i or [ins]	C	Left command mode; change to normal textarea edit mode.
/regexp ¶	C	Find regexp. Start at first character. more info
n	C	Repeat last / search. Start at current cursor position.
?regexp ¶	C	Search in reverse for regexp. Start at end of text. more info
N	C	Repeat last ? search. Start at current cursor position.
:w ¶	C	Ask for form submit.
:w! ¶	C	Submit form.
:set ic ¶	C	Ignore case when searching.
:set noic ¶	C	Don't ignore case when searching.
:s/regexp/str/opt ¶	C	Search regexp and replace it with str. opt can be g for global changes, or i for ignore case. more info
&	C	Repeat last :s command (if opt not included g)
%	C	Search to beginning or ending of balancing ( ) [ ] { } < > and select content.
u	C	Undo last :s command (max. buffer size 20)
R	C	Redo last u command
x	C	Delete charater at cursor position.
G	C	Caret to begin of last line.
$	C	Caret to end of line.
Feature	Mode	Description
Remember status	C,E	After the site is loaded, several status information are restored: cursor position highlighted selection area last regexp for searching last regexp for search and replacing edit mode (C/E) Status is stored during the last submit.
Index for status remembering	C,E	Values of input (also hidden) form fields with the attribute viedit are used to create a unique index for saving the status information.