In today's article, I'll begin a two-part series on WYSIWYGs. In part I, I'll explain what a WYSIWYG is and how they work. In Part II, I will explain a shortcoming of the current implementation and my goal of improving the WYSIWYG for my content management system.
What is a WYSIWYG?
WYSIWYG stands for What You See Is What You Get. Pronounced
wiz-ee-wig, it is a control which is used for creating rich text documents. When you make a change to the document, that is how the finished document will look. You don't have to write any code to make the document look like you want. Almost all WYSIWYGs claim to have an interface similar to Microsoft Word.
Most WYSIWYGs are found on websites. Even if you didn't know what a WYSIWYG was, you've almost certainly used one. Most web-based email clients like Gmail, Hotmail, and Yahoo mail have WYSIWYGs for creating email.
WYSIWYGs Under the Hood
Most web-based WYSIWYGs store the document as HTML code. They make heavy use of javascript to manipulate the document DOM. For example, when you highlight a word with your mouse and click the Bold icon, essentially what is happening internally is that the WYSIWYG finds that word in the DOM, removes it, and creates a new child node for the bolded text. You can think of it like this:
Before:
<p>This is some text in my paragraph</p>
After:
<p>This is some <b>text</b> in my paragraph</p>
Of course you don't have to worry about the <p> and <b> tags, the WYSIWYG does it all for you. You just type, click, highlight, and format to get the content to look how you want.
When you're finally done editing, you need to save the document. As I mentioned above, the WYSIWYG stores the document as HTML code. So, what happens is that the DOM gets translated to HTML. To do this in Internet Explorer is to use the innerHTML property. This property returns an element's inner HTML. The HTML can be written to file or database. The next time one wants to edit the document, the HTML gets rendered into the DOM and we are back where we started.
HTML to DOM, DOM to HTML. This cycle can be repeated as needed.
That's it!
WYSIWYGs allow people to quickly and easily create content without having to write code. Now that we know what a WYSIWYG is and how it works, we can talk about strengths and weaknesses. Tune in next time for Part II where I'll discuss why this implementation won't due and how we're trying to improve it for ePortfolio.
Check It Out
As I've mentioned before, marketing is not my strong point. It would be an understatement to say that marketing is Seth Godin's strong point.
Seth's blog is very highly regarded. The topics of the daily posts about marketing and the way ideas spread are really insightful. They always make me think. Definitely addicting and worth it :)
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5