SnapEditor - Online HTML5 WYSIWYG Editor (original) (raw)

Why It's Good #1:

Both In-Place and Form-Based Editing

In-Place Editor - Just click on the text to start editing

In-place editing is the only way to get true WYSIWYG editing . Your customer will love you for it and you won't be answering support calls on why they can't get the page to look right.

Based on over 2 dozen interviews, the #1 problem is that so-called WYSIWYG editors are actually N-WYSIWYG (NOT What You See Is What You Get).

Form-Based Editor - SnapEditor does this too!

Why It's Good #2:

Clean, Perfect HTML Every Time

Bad HTML is the #2 problem based on our interviews and it will destroy the look and styles for your site. It can give your designer a nervous breakdown. A good editor guarantees perfect HTML by constantly cleaning it.

Why is bad HTML such a problem?

It can mess up the styling for your website in weird and unpredictable ways. This breaks your application and your clients will think that it is your fault.

Cut and Paste from Google Docs shown above into different editors below.

SnapEditor

68 characters

<h1>Hello World</h1><ul><li>Hello Stars</li><li>Hello
Moon</li></ul>

?kEditor

2657 characters - 3907% more code

<h1>
   </h1>
<h1 dir="ltr">
  <b id="internal-source-marker_0.9523176208604127" style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; font-weight: normal; "><span style="font-size: 24px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; ">Hello World</span></b></h1>
<ul style="margin-top: 0pt; margin-bottom: 0pt; ">
  <li style="list-style-type: disc; font-size: 15px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; ">
    <b id="internal-source-marker_0.9523176208604127" style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; font-weight: normal; "><span style="font-size: 15px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; ">Hello Stars</span></b></li>
  <li style="list-style-type: disc; font-size: 15px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; ">
    <b id="internal-source-marker_0.9523176208604127" style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; font-weight: normal; "><span style="font-size: 15px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap; ">Hello Moon</span></b></li>
</ul>

Why It's Good #3:

It Behaves The Way You Expect It To

Unpredictable Behaviour is the #3 problem that developers have with editors.

When an Editor doesn't work the way a user expects it to, it is frustrating and diminishes trust in your web application. It's easy for a WYSIWYG editor to overlook this because every browser handles editing a little differently and the Editor has to account for all of these differences.

A good editor needs to tightly control and test the user experience until the Editor behaves in a way that users expect.