IOS5 now supports contenteditable. Come on Android!

Users who love or need their WYSIWYG editor (Whizzywig, TinyMCE, CKEditor etc.)  have been complaining for years that they would not work on on their mobile device. They could edit their blog or update their favourite site with rich text on their desktop machine but no joy on their iPad or smartphone.

They would not work because no mobile browser would support the contentEditable attribute despite the fact that all the major browsers support it in their desktop versions - Internet Explorer since 5.5. Well it seems Apple have been listening and now these things will work in IOS5. Great if you have an iPad 2.

Not so great with Android though, which not only still fails to support it, but actually lies if you test for support:

document.getElementById("test").isContentEditable

returns "true" but the onscreen keyboard will not appear so you cannot type into the edit area. This is Issue 8253 for Android. No sign of a fix yet.

Last Whizzywig of 2011

There's a new version of Whizzywig 2011  and it should be the last one ever. Clearly we can't go on calling new releases "2011", so in 2012 it will appear with a new name - how exciting! - and, if all goes according to plan, its own website.

Many thanks to all who have tried it out in 2011 and provided feedback. Hopefully it will be a much better editor for this.

The main new feature is clean pasting: if you paste in stuff from a document or a website then the editor will strip out all extraneous styling, fonts, colors , spans, classes and ids that only made sense on the original page, leaving you with some uncluttered and pure html. This should be pretty consistent across browsers (some were driving me mad with their silly paste behavior!).

And here, documented for the first time, are the keyboard controls:
 CTRL+Space - Clear all inline styles and classes
 CTRL+B - Bold selected text
 CTRL+I - Italic selected text
 CTRL+U - Underline selected text
 CTRL+H - Edit the HTML source
 CTRL+L - Insert a Link
 CTRL+M - Insert an iMage

Note that the cursor must be in the edit area for the above to work, or you'll get the browser default action (History, Bookmarks, etc.)

Double-click
 a link - bring up the Link dialogue
 an image - bring up the Image dialogue
 the toolbar - toggle full window

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.

CSS inline-block on IE6 and IE7

The CSS display property can be set to "inline-block":

inline-block

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

This is useful for all sorts of stuff including displaying inline a row of images and captions in the same block , or as a container for a dropdown menu. But older browsers, notably Firefox 2 and Internet Explorer 6 and 7, do not support it. See the Mozilla Webdev blog for an explanation and fix.

In summary you can add "zoom:1; *display:inline" to trigger haslayout for IE  and exploit the "*" CSS hack to make the thing inline.

But if you look at Quirksmode's always helpful compatibility page, you'll see that "IE 6/7 accepts the value only on elements with a natural display: inline."

So if you are not worried about Firefox 2 (anyone still using that? why?)  you can simply make the inline-block container a span instead of a div and not worry about any hacks for Internet Explorer.

The trouble with hacks is you can never be sure they are proof against future browser releases.

What to do with a brand new Windows PC

1. Install Linux Mint, taking the "Use entire disk" option.
   All your Windows problems and viruses will disappear.

OK, though this is good advice for most casual users, it's not always practical. I need a Windows 7 machine so that I can test websites in Internet Explorer 9, for instance. Other people have to run business software that's Windows only - although you might be able to run it under Wine.

So, if you really must have Windows...

1. Make sure it's at least Windows 7. Windows XP is an overpatched relic and Vista was only ever slightly less smelly and infected than an open sewer.
2. Delete all the bloatware the manufacturer put on there. Likely candidates include:
   - Trial anti-virus software that wants you pay after 30 days
   - Trial Microsoft Office software - there's no need to pay for commercial quality office applications
   - Free games, that probably cease being free after a month, or x plays
   - Proprietary cloud services  for backup or additional storage
   Contol Panel&gt;Uninstall applications is your friend.
3. Install Google Pack. This will give you a whole bunch of useful stuff in one go, including free and sensible replacements for the stuff you just removed. Just take your pick from the list.
   Note that you don't need more than one anti-virus product, if in doubt pick Avast.
4. If you installed Avast at step 3, register it right now.
5. If you are a serious wordsmith or spreadsheet user, download and  install Libre Office.
   This will let you read and write Microsoft Office documents so you can exchange files with all those 20th century throwbacks who still imagine it's a good idea to mail around bloated Word documents or vast Excel spreadsheets. (Try and persuade them to share using Google Docs, it will save duplication, bandwidth and time)
   Libre Office is the worthy descendent of  OpenOffice.org that has already extended with some useful features and is not bound up in Oracle's pursestrings. It will have all the features you need, is well documented and as easy to use as anything.

Now you have a sensible PC.

execCommand browser compatibility - it's crap

Modern browsers allow you to apply commands to format HTML in a contenteditable element, or an iframe with designmode set on. This functionality enables javascript rich text editors like CKEditor, TinyMCE or Whizzywig. 

This is the execCommand interface, common to Internet Explorer , Firefox, Chrome, Safari or Opera. Except that it's not common because they all generate different HTML in response to these commands.

There's a test at http://www.quirksmode.org/dom/execCommand/  which I have found very useful for seeing how each browser mangles the HTML - even though it has bugs itself! See also the compatibility table, which would be more helpful if it told you what HTML was produced by each browser.

None of them are entirely without problems but I think there's a clear winner. 

For example, issuing a "bold" command on a text selection gives:

• <b>   in Chrome 8 and Safari 4.1 (b is NOT a deprecated tag, contrary to what some say)
• <STRONG>  in IE8 (yes, IE makes all tags UPPERCASE, so not XML compliant)
• <strong>  in Opera 11 (preferred by some as more semantic)
• <span style="font-weight: bold;">  in Firefox 3.6 (but you can styleWithCSS=false to get <b>)

Issuing an "indent" command on a paragraph gives:

• <blockquote class="webkit-indent-blockquote" style="margin: 0 0 0 40px; border: none; padding: 0px;"> in Chrome 8 and Safari 4.1 (!!!)
• <BLOCKQUOTE style="MARGIN-RIGHT: 0px" dir=ltr> in IE8 (doesn't even quote all the attributes!)
• <blockquote>  in Opera 11
• <p style="margin-left: 40px;"> in Firefox 3.6 

So Opera 11 looks like the winner on generating HTML to web standards. The others are all an unholy mess. Internet Explorer's output frequently will not validate. Chrome and Safari insert unnecessary classes and, together with Firefox, use inline styles which will trample all over your carefully crafted stylesheet rules.

Blogs and Pages

Wordpress is blogging software but you can add and edit static pages and use it as a CMS.
According to Blogger Buzz, you can add pages (up to 10?) in Blogger too, but I have not tried this yet.

In Whizzy, everything is a page. But if you could add a tag/label/category/list (pick a name) then you could organise pages in lists. So you can make a page list other pages in a tag/label/category/list: a simple list of links is a menu, a blog is the same list with the page content included, perhaps with just a summary and perhaps with a limited number.

Other features of blogs:

• syndication via RSS or Atom - also generated from the tag/label/category/list
• comments - any Whizzy page can have comments up to commentlimit, perhgaps using Disqus