Making stuff as a founder of Avocado. Former music-maker. Tuna melt advocate. Started Google Reader. (But smarter people made it great.)

A more technical note on Blogger's implementation of WYSIWYG editing in the browser.

What's this all about then?

 I just wanted to provide a brief overview on implementing WYSIWYG editing within Blogger that describes some of the techniques and technologies required for its implementation and the address the impact of the design on web standards education.
WYSIWYG: An acronym that stands for What - You - See - Is - What - You - Get. A WYSIWYG application is one that enables you to see on the display screen exactly what will appear when the document is printed. WYSIWYG applications are especially popular for publishing.
A little background.

 In an ongoing effort to lower the barrier to entry for self-publishing we've investigated features that can reduce the HTML knowledge required to post to a weblog. We've also been investigating ways to introduce greater stylistic control over post content to users. Additionally, there have been several efforts by competitors in our business domain (sometimes via third-party plug-ins) to introduce text-styling controls. So, there was a quite a bit of interest on our part in developing something.

Why the WYSIWYG?

 We'd like our users to be able to express themselves more accurately in the text they're writing, including text styling. And since two of the major browser vendors supply native formatting tools that can be extended it seemed that we should offer some solution. I go into further detail in my earlier note on the usefulness of WYSIWYG editing in the browser.

MSHTML and Midas.

With the release of Internet Explorer 5.5, (is that correct? asking the web to help fact check -cw) Microsoft exposed a WYSIWYG HTML editing feature set with ongoing support which includes the following:
  • Standard editing functionality such as caret positioning, keyboard navigation,
  • drag-and-drop, and content selection.
  • Copy, cut, delete, and paste operations.
  • Multi-level undo and redo.
  • The ability to toggle selected text between bold, italic, and/or underlined.
  • The ability to alter typeface, font size, forecolor (text), and backcolor (background).
  • The ability to remove formatting.
  • The ability to increase or decrease indentation.
  • The ability to justify text (left, center, right).
  • The ability to create ordered and unordered lists.
  • The ability to create a hyperlink or bookmark.
  • The ability to insert a horizontal line.
  • The ability to insert an image.
Since, then the Mozilla Organization followed by developing Midas, a rich-text editing library that was released with the 1.3 branch of Mozilla. It supports the same features listed above and some others. Its API is similar in use, but has some important differences.

An important vendor note is that the next version of Safari will support a WYSIWYG library and, as far as I know, Opera currently has no support for rich-text editing nor published plans to generate any native effort in that regard.

Learning The Wrong Thing. Standards education. Removing the FONT tag.

Blogger has many, many users and the adoption rate is continually increasing. This created a bit of pressure on me as I worried that use of the native WYSIWYG support for each browser could help to slow movement away from the use of deprecated HTML, particularly as Internet Explorer will not see any significant upgrade for years. I felt there was an opportunity to provide some education regarding well-formed markup for users who were interested in looking beneath the hood by entering an "edit source" mode and would see markup they would assume was the-way-to-do-things.

Both Midas and MSHTML return the <font> tag, when applying styles. Midas, it seems, only returns a <font> tag when adjusting certain font sizes. MSHTML generated markup is particularly hard to resolve within standards-compliant sites as it returns markup like "<FONT size=5>foo</FONT>". So, to make things generally well-formed is a bit tricky. I could have avoided using execCommand (other solutions have done this) but since we have a general need for a client-side method to alter content containing deprecated tags, I instead made a series of regular expressions that transform FONT tags into SPAN tags.

Each version a derived class.

There are times when a WYSIWYG solution isn't appropriate, but at the times a need is presented, it would be nice to avoid re-creating the infrastructure for the basic widget functionality. The Blogger implementation is a sub-class of a RichEditor() object. The API is at an early stage and much more work needs to be done to reduce the footprint and improve re-use, but it'll allow us to separate specific implementation concerns from general WYSIWYG concerns.

Floating toolbar widgets.

Because Blogger's implementation may need to adapt to a variety of posting enviroments, I drafted the toolbar so that it relies on <span> elements whose positioning and style are largely determined by CSS.

The paste experiment.

Both Midas and MSHTML allow for users to paste arbitrary HTML from whatever previous system selection was captured. This is great. But for many this generated a series of problems. The common case of copying data from another website and pasting into the editor in order to comment on that content proved challenging as extra-content HTML was often included in the selection. It was often difficult to remove (especially if it included ads) and could generate run-time errors.

I've taken my cue from other editors and attempt to leave hyperlinks and line breaks but strip all the rest of the HTML in the copied selection. For now, this stripping mechanism only occurs in IE for a couple of reasons. 1.) I'd like to improve on the various workarounds for cross-browser onpaste/onbeforepaste I've seen in web development, if I can. 2.) I suspect that many users of Gecko-based browsers can do a better job of recovering from non-intuitive layout puzzles. :)

Humor. *snort* Yes, I'm looking into that as well.

Some cavaets.
  • The browsers could drop (or limit) support for their WYSIWYG features in the future.
  • Trying to handle the vagaries of the varied HTML expressions of internet content creators is somewhat like eating soup with a fork. There will be an early scramble to define a series of expressions that will match a set that a majority of users will find useful.
It's an interesting problem, and one for which I don't expect there is one clear solution, nor is it likely to be solved right away. But it's clear to me that as a growing set of users are becoming accustomed to richer "client-like" experiences within the browser related to content creation on the web (--you know, like Gmail and Yahoo! Mail, just to mention a tiny fraction of web apps whose interfaces are getting richer--) that WYSIWYG and its variants will be an important step to making web applications easier for a growing number of people.
posted at July 15, 2004, 1:01 PM

48 Comments:

  • At 12:52 PM, rick said…

    Nice job on Blogger. Recently I felt the urge for insta-gratification blogging and started with Blogger. The interface and options are far superior than they had been. Keep up the good work!

     

  • At 10:30 AM, Martin Lindeskog said…

    Chris: I have sent you an email regarding the new WYSIWYG Blogger editor and some problems I have had with my blog. I look forward to your answer. Thanks! :)

     

  • At 2:10 PM, kk+ said…

    Are you going to add the WYSIWIG editor to the template editing page?

     

  • At 1:39 PM, Carlos Ribeiro said…

    Talking about the template page: have you seen the CSSCreator website? It is a page to generate CSSs. Although far from being immediately usable, the concept is something worth adding to Blogger. As for Google and GMail... any chance to have the RichText support added to GMail? (I'm not sure even if you have some contact with the guys there!)

     

  • At 3:36 AM, Steve said…

    I have to give you many props for developing something via web standards. Many developers don't unfortunately.

    Congrats!

    P.S. It works well, but I am having problems with the hyperlink action.

     

  • At 10:24 PM, madscribbler said…

    wysiwyg what you see is what you get. Today I got the meaning of wysiwyg. Thanks for that. I like the editor and blog happily.

     

  • At 7:28 AM, Bad Commie said…

    This post has been removed by a blog administrator.

     

  • At 7:30 AM, Bad Commie said…

    This post has been removed by a blog administrator.

     

  • At 5:27 AM, firstbrokenangel said…

    I am totally lost on how to set up my blog, editing the introduction and how to put in links. I really could use some help. Thanks

     

  • At 12:43 AM, dgrjazz said…

    Hey now,
    The other night I was posting
    After typing about five paragraphs I clicked on publish and I got "page cannot be displayed" and everything was lost.
    I was using IE6 on a comcast connection with a wireless network.
    Do I need to save the text to the clipboard just in case?

    Thanks

    dgrjazz@earthlink.net

     

  • At 9:27 AM, John Whipple said…

    We are a large family that uses a blogger blog to stay in touch. We love the new WYSIWYG feature on the post page. Thanks.

    Is there any information available on how I could implement the very nice "designs" feature you have on your blog here where the background can be changed by the viewer? john@tejasrecords.com

     

  • At 8:54 PM, rolandog said…

    Hello, pretty nice article...

    But I was wondering what happened to the 'upload file' buttons we see on some of the UIs..?

    rolandog@gmail.com

     

  • At 5:21 AM, Monica said…

    deixem aqui seus comentários, e na medida do possível vou responder...beijinhuxxx...

     

  • At 1:37 AM, Sven Krona said…

    Indistinguishable from magic.. And it works in Mozilla!!

    Good Job,

    - Sven

    http://swemusings.blogspot.com

     

  • At 7:02 AM, Stevatron DX 1ooo said…

    Very VERY interesting article. Lots of things I'd never thought about before.

     

  • At 6:15 AM, BG3AM said…

    It's a great achievement.

    Isn't it remarkable how introducing a great new tool just creates an immediate appetite for even more? To the voices who would like to see WYSIWYG editing of templates, let me add mine. Now that I can post comments to my blogs with flair and ease, how great to be able to do things like add links and RSS feeds to my sidebar, all from within a WYSIWYG environment.

    BG

     

  • At 6:04 PM, Just John said…

    If I could understand all that fancy talk, I am sure I would have a Question.

     

  • At 6:04 PM, Just John said…

    If I could understand all that fancy talk, I am sure I would have a Question.

     

  • At 6:04 PM, Just John said…

    If I could understand all that fancy talk, I am sure I would have a Question.

     

  • At 6:04 PM, Just John said…

    If I could understand all that fancy talk, I am sure I would have a Question.

     

  • At 6:07 PM, Just John said…

    If I could understand all that fancy talk, I am sure I would have a Question.
    KEEP UP THE GOOD WORK, AND I MIGHT JUST SOMEDAY UNDERSTAND.

    JUST JOHN

     

  • At 8:40 PM, Anonymous said…

    My son asked me what is a "blog". and what is a "blogger", so I did a websearch and this is where I ended up.
    Now I'm wondering if this is something that I might be able to use to build a website. Looks interesting.

     

  • At 7:30 AM, Dominic said…

    Hiya,

    I have some problem with ur composer. Previously i could submit an entry. Now i cannot seem to key in my entry in ur composer windows, except for the title. This after I installed a Primedius firewall(lite version).
    Pls advise. Thanks.

    Thanks n regards,
    Dom
    yjq82@hotmail.com.

     

  • At 10:26 PM, Anonymous said…

    Nice and very clear explanation. Thanks,
    Joshua Salik
    Salik Games
    http://salikgames.home.att.net/wsb/humor/ColaSalikGames.html
    "The empty half of the glass is always at the top"

     

  • At 11:31 AM, The Lioness said…

    Even though I've learned a fair amount of HTML since i started my blog I can't really say I understood this post so I don't even know if this is the place for my question. I have looked everywhere in all sections of Blogger help and couldn't find an answer. All I need is to find out how to get my template to select Arial as its default font. I think this could be done, I simply do not know how. Could you - or anyone else - help? Thank you.

     

  • At 4:12 PM, Teddy Jacobson said…

    My name is Teddy Jacobson, I am a Pistolsmith in Sugar Land, Texas. My website is www.actionsbyt.com
    I am not much of a computer person and my Blogger site is www.actionsbyt.blogspot.com/
    My question is when I write a new blog on my main computer I have a blue background that makes it hard for me to see the type when I write my daily commentary.
    On my lap top I have a white backgound. I want to change my blue background on my main computer and I need some instruction on how to do this.

    If some one could please email me at tjacobson@houston.rr.com
    I would be grateful for your help.

    Thankyou.

    Teddy Jacobson
    www.actionsbyt.com
    www.actionsbyt.blogspot.com/

     

  • At 11:52 AM, walter_alkimim said…

    im fine thanks

     

  • At 10:01 AM, Rebel Lawyer said…

    Will someone point me to a site that explains what gets the attention of other bloggers or internet surfers? True, I only recently entered the arena, but so far there is no indication that anyone has even seen my posting.

     

  • At 12:10 PM, David Bruce Murray said…

    I like the functionality of having WYSIWYG for submitting posts. I've noticed, however, that when I click the pencil icon on my blog (to edit) and then hit "Preview" in the Edit Post window that appears, it's quite often that the font and appearance has changed from what was originally posted.

    In other words, I may want to edit just one tiny thing, like making a word bold, but I have to reformat the entire post in order to accomplish that.

     

  • At 3:24 PM, GT said…

    The WYSIWYG Editor does some odd things with currency symbols; when you use "escape codes" (such as £ and ¥) in the HTML (so that the resulting display is non-font dependant), the WYSIWYG editor displays the "correct" symbol but the HTML engine then goes and REPLACES the escape codes with the "actual" symbol in the HTML code.

    That would be OK if it was independent of font (and/or size), but it doesn't appear to be; it results in the actual published blog displaying cG for £, cD for ¥ and ? for the Euro symbol.

    Is there a fix for this (apart from writing "Euro" and "Yen" every place that a price isn't denominated in USD?

    To examine an example of the currency-symbols-not-working, look at

    http://marketrant.blogspot.com/Symbol-Test.html

    I have "back-published" it to Jan 1 2004 while I'm testing it so that it doesn't appear in my normal blog.

    Cheers,


    GT

     

  • At 11:14 AM, Anonymous said…

    This post has been removed by a blog administrator.

     

  • At 6:56 PM, Anonymous said…

    This post has been removed by a blog administrator.

     

  • At 9:34 PM, Tinuviel318 said…

    I'm sorry to bother you, but I've been trying to get my Blog to allow me to post for quite sometime now. For some reason, I'm unable to type in the text box when posting on my computer, but have no problem doing so from other computers. I have not been able to figure out how to make it work and am really wanting some help. My blog is runnerchick.blogspot.com Thanks!

     

  • At 10:25 PM, Googler said…

    How can I add these two buttons to my blog editor:

    [Google Link]
    print "$_\n";

    [Google Image link]
    print "$_\n";

    I have to create links all the time, when I am captioning my photoblogs.

    I have to keep switching to Opera to cross check my facts, then cut/paste links into vim/emacs, edit,
    and paste into Firefox. Which is a pain, I spend more time in opera than typing on my blog.

    Also can you wrap my lines, and treat \n\n as a paragraph break.

    - thanks.

     

  • At 12:16 PM, Anonymous said…

    Hello :)
    First of all, thanks for the great blogger service, though i do sure thinkk it lacks sexy features like
    multi paging, preview text, on the front (with read more buttons)
    insertation of special code blocks like [code][/code] and more of that stuff.

     

  • At 12:59 PM, mike said…

    Yes, nice job. I used MSHTML for a rich text editor in a CMS I wrote last year for my client. It does lots of stuff but you have to tame it to make the stuff that comes out well-formed and remove bad stuff. Lots of regexps.

     

  • At 9:15 AM, Denny said…

    For the life of me I can't figure this out. How do I allow the system on my blog to post the time a comment was written? Only the date is there? I have another page and the date and time of postings are both there... I just can't figure it out on my comments page. Thanks
    http://djshane.blogspot.com/

     

  • At 10:00 AM, DakBangla said…

    Wonderful article.

    I was wondering how direct email to Blogs could be sorted? Inevitably the words sent by email have the lines broken up and sometimes a real pain to read.

    Can anybody suggest

    a) How to have "fixed font/s" for the email Blogs to appear?

    b) How do we make sure the lines are not broken - and is it also possible to pre-fix the Justify button?

    c) Sometimes while the tick button of the secret em,ail is not there - the email appaer nontheless on the blog - any idea why that happens?

    Cheers!

    Joe

     

  • At 10:56 PM, Prema Lawrence said…

    I hurriedly put in my blog to help Tsunami victims. Its been great since I really did not have to do much to put the blog in and its good enough. I do not have much time to work on making it look better but there are a couple of problems I have had. I just copied my word doc in and then found all the bullets looking really weird. How do I copy and paste without losing the style? Also I want to have one post with thumbnails of pics that people can click on. Is that possible?
    Thanks for being there for us the ignorant ones.

     

  • At 1:21 PM, Garvey Winegar said…

    WYSIWYG is a joy. Appreciate all the work you did to get it going.

    I have a question that has nothing to do with "wigs" or fonts.

    How do those of us -- poor clickers-away-in-the-darkness that we are -- know how many people read or "hit" our blog sites? Not everybody, we must assume, hits "respond" to tell us what great bloggers we are.

    As Yul Brenner said in the movie: "Eez a puzzlement."

     

  • At 2:38 AM, Anonymous said…

    I just start to use blog. It's really a good tool to communicate.

     

  • At 9:01 PM, Eric Simonson said…

    SImply the best online wysiwyg editor I've seen. Great job.

    Any chance that the code is open source and available...?

     

  • At 11:53 PM, Muhammad Abd al-Hameed said…

    It seems the geeks do not read much on their monitor screen, certainly not the contents of blogs. Otherwise, they would remove a huge annoyance.
    Human eyes cannot read long lines easily. The eyes waver towards the second half and you have to strain them to keep them on the same line. That is why we have columns in newspapers and magazines. The standard for a text line is alphabet-and-a-half. In simple words, write all letters a-z and then again half of them and you will get an optimum line length for the given type face and type size. By that measure, you must allow at least two columns for the blog texts. Add a button for two-column format to other formatting commands and you will solve the problem.

     

  • At 5:19 PM, bjarke said…

    Or create your layout to be less wide to compensate for the features lacking in your blog-provider ;-)

     

  • At 9:01 AM, ;-) said…

    I am pretty lost as to how to edit and add links as well. Just started today with my blog. any help would be greatly appreciated!

     

  • At 2:04 PM, DaveP said…

    When I do finish up with invalid content, do you provide anyway of checking it please? Perhaps a check button, which may point out an area of error?

    I now have a blog that Firefox+Sage plugin tells me has a parse error, which I can't find since I can't view the atom XML?

    Any suggestions appreciated please.
    www.dpawson.co.uk

     

  • At 7:31 AM, Stacey said…

    I have a couple of issues with the wysiwyg editor.... It doesn't handle converting < and > and causes multiple spaces to not be converted to non-breaking spaces... these things make it hard for me to post source code into my blog.. I like to write about coding tips, tricks, and problems... Plan on fixing it anytime? Or suggestions on how to remedy it? For now, I think I am going to write me a little util to do the conversion for me, but it is a pain.

     

  • At 8:15 PM, Tilt said…

    Is there a way to insert text files into the post editor? Preferably without losing formating such as italics, bold, etc.? What I'd like to do is to insert RTF format or DOC format files from Word or WordPad into posts. Whenever I try to copy and paste it removes hart returns and all italics and such. Thanks!