Really simple WYSIWYG, with jQuery

or, How to make a WYSIWYG input with Javascript

I've made a really simple WYSIWYG editor with jQuery to demonstrate how to use contenteditable with execCommand to format text.

It's not a plug-in and the main virtue of using jQuery for this demonstrator is that it makes the code easy to figure out. Have a look at the source and use it as a starter if you want to make your own editor. There's about 30 lines of HTML and another 30 or so of JavaScript.

The HTML consists of contenteditable div, editor, which is where the editing takes place and above it a div, toolbar,  containing controls - buttons and a select - to call up the commands to edit the text in  editor, plus a button to view the HTML source of the document in editor. This is all within a container div, WYSIWYG.

Then there is a textarea, HTML, which holds the HTML source for the document being edited. Above it is a button to return to the WYSIWG view. These are in a container div, source.

There's just 4 JavaScript functions: the first is a wrapper for execCommand:
function make(cmd,parm){

 if (cmd.indexOf('<')==0){
  parm=cmd;
  cmd="FormatBlock";
 }
 if (cmd == "InsertImage") parm = prompt("Filename or path to image","");
 if (cmd == "CreateLink") {
  parm = prompt("URL or address of link (leave blank to unlink)","http://");
  if (parm=="" || parm=="http://"){cmd="Unlink"}
 }
 try {document.execCommand(cmd,false,parm);} catch(e){alert(e)};
}


Then there's a function to show the WYSIWYG view and hide the Source view:

function vWhizz(){
 $('#source').hide();
 $('#WYSIWYG').show();
 $('#editor').html($('#html').val())
}


The last line of this copies the html inside the textarea into the editor.

Next, a function to hide the WYSIWYG and show the source in the textarea:

function vSource(){
 $('#html').val($('#editor').html());
 $('#WYSIWYG').hide();
 $('#source').show();
}


The first line of this copies the edited HTML back into the textarea.


Not strictly necessary, is a function to resize the editor/textarea so it fills to the bottom of the window:

function reHeight(){
 var top=Math.max($('#editor').offset().top,$('#html').offset().top),
 newHeight = $(window).height() - top - 10; 
 $('#html').css('height',newHeight+'px');
 $('#editor').css('height',newHeight+'px');
}



When the DOM is first loaded, we bind the reHeight function to a resize of the window,
show the WYSIWYG view and hide the source view:

$(document).ready(function() {
 $(window).resize(reHeight);
 make('styleWithCSS',false);
 vWhizz();
 reHeight()
});



"make('styleWithCSS',false);" is there just to stop Firefox and other Gecko-based browsers sticking in some in-line styles instead of using HTML for bold and italics.


See the HTML to see how the toolbar controls issue commands.


Maybe there will be a proper plug-in with more functionality along later.