jQuery HTML Editor


What is jQuery HTML Editor?

jQuery HTML Editor is an editor with which you can make an HTML document with use of jQuery commands.
You can show DOM elements on the screen above using jQuery commands. Type following command in the textfield,


and click the "exec cmd" button on the right of the textfield. You will see the "hello" headder is appended onto
the screen. $s(selector) function is similar to $() function of jQuery, but it is realy a function defined as follows:

$s = function(selector) { return $('#screen').contents().find(selector) };,

because of the top level of the screen is <iframe id="screen"></iframe>. Use $s() function in place of $() function
to control the DOM elements on the screen. e.g.,

$s('h1').text('How ara you?')

replaces "hello" string with "How are you?".

The "sc/txt" button toggles the HTML documents view between the renderd one and the source. You can also edit
the source directly. Changes in the HTML source will be applyed when you click the "sc/txt;" button.

If you are viewing this page with Google Crome, press Shift + Ctrl + J to show the JavaScript Console; Use $s() function
in place of $(). Then, you can control the screen of the jQuery HTML Editor from the command line, as well as the textfield
on the top of the page.

Although this is a toy program, it will help you enough to understand the basic relation between jQuery Objects and HTML

This script is a freeware. You can use it or distribute it freely. But the js libraries are licensed(GPL etc.)
to the authors. The libraries used here are, jQuery (http://jquery.com/) and jquery.indent.js


Copy and paste following commands onto the textfield on the top of the page, and press "exec cmd" button.

["apple", "orange", "grapes"].map(function(elem) { $s('ul').append('<li>'+elem+'</li>') } );

$s('body').append('<table border></table>');
for (i=1; i<6; i++) { $s('table').append('<tr></tr>'); for (j=1; j < 6; j++) { $s('tr:last-child').append('<td id="'+i+'_'+j+'">cell('+i+','+j+')</td>') }; };