Let’s start with a picture.

image

Boring, eh?  Now I’m going to add a little bit of Wijmo love:

image

Render again, and here’s what we got!

image

Holy crap!  What did Wijmo do to our simple <textarea>?  It made it awesome!  Our simple <textarea> is now a full blown HTML rich text editor.  Check out the ribbon view in the screenshot above.  We have lots of familiar commands: undo, redo, cut, copy, paste, preview, and remove formatting.  Next to that are other common word processor commands: font name, font size, bold, italics, underline, and strikeout.  The list goes on and on.

We give you full control over how the look and feel of the control.  For example, let’s say you don’t want all the ribbon stuff.  Change the method call like this:

image

The new end result is a simple text editor.

image

Your next question might be: “Kevin, what does the output of this text editor look like, and how to I get it?”

That’s an excellent question. How would you pull the value of a textarea without Wijmo?  If you’re a jQuery user (and I’m assuming you are if you’re using Wijmo), you would use the .val() method.  Using a Wijmo Editor is no different.

image

What does the output look like?  If I wire up the full example by adding a button to the page, and assigning a click event (the screenshot above), I get the following output:

image

It’s all HTML in the end!  Take this output and do whatever you need with it.

This is just scratching the surface of what is possible with the Wijmo editor, so I encourage you to go download the v2 BETA and try it out for yourself.

Kevin Griffin
keving@componentone.com

Follow me on Twitter