Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Black text reading: "What You See Is What You Get" with the capitals in white to highlight the acronym, WYSIWYG.

How WYSIWYG is your WYSIWYG HTML editor?

Ben Long

September 6th, 2020

Written by

Ben Long
Ben Long

Category

Design & UX

Whether you’re building a new product or you’re looking to enhance an existing product, think about upgrading the text entry component to provide your users with the best content creation experience possible.

WYSIWYG stands for “what you see is what you get”. This means, instead of having to write and format web content with HTML code, users can write it as if using a familiar interface like Word, and the HTML is generated behind the scenes automatically.

But some editing experiences are more WYSIWYG than others.

In this article, we provide an overview of your options when it comes to providing the best WYSIWYG editing experience for your users, and demonstrate how to get started with our WYSIWYG HTML editor in your applications.

The simple editor

Often users create content in an editor where, although they don’t have to write any HTML, the styling of the content is quite basic.

For instance, the editing experience might look more or less like this:

An instance of TinyMCE with its default styles.

Then, when the content is saved and published to a page, it might look like this:

Content from TinyMCE editor rendered with styles applied.

This is a common scenario, and a perfectly reasonable way to design a product.

Custom styles within the editor

In some cases, though, your users will enjoy an experience where the content is as close to the published content as possible.

The best WYSIWYG HTML editors can be configured so the content within the editor more closely reflects the published content; for example:

An instance of TinyMCE configured with custom content styles.

Inline editing

Furthermore, some WYSIWYG HTML editors can be configured as an inline editor, so that edits can be made directly to content without having to switch between an editing and viewing mode. In these scenarios, the toolbar typically appears once a text area has been selected for editing:

TinyMCE running as inline editor.

And if you want to get really fancy, you can have context toolbars appear only once text is selected - an experience familiar to Medium users:

TinyMCE running as an inline editor with context toolbar on text selection.

TinyMCE

TinyMCE is a WYSIWYG HTML editor, supporting all of these editing experiences and more.

Users interact with the editor using all the familiar buttons and shortcut keys, and the corresponding HTML code is generated automatically, behind the scenes, so it can be rendered in your online applications.

Trusted by millions of developers across the globe, it’s used as the text entry component in over 100M+ products worldwide. Check out examples of 9 products you can build with TinyMCE.

Get started with our WYSIWYG HTML editor

Get a free API key and try our WYSIWYG HTML editor in your own applications.

Once you’ve got an API key, getting your first instance of TinyMCE running is as simple as pasting the following code into an HTML file and opening it up in a browser (replacing no-api-key with the API key from your account dashboard).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>
  </head>
  <body>
  <h1>TinyMCE Quick Start Guide</h1>
    <form method="post">
      <textarea id="mytextarea">Hello, World!</textarea>
    </form>
  </body>
</html>

NOTE: You will be presented with a warning notification - This domain is not registered with Tiny Cloud - if you are running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account. To remove the notification, open it on localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.

What next?

Once you’ve got TinyMCE running with the default configuration, you can customize it to suit the specific UX you want to provide in your products.

Enhance the WYSIWYG experience

Customize user options and features

TinyMCE is extremely powerful and flexible - you can configure it with as many or as few options as you need. Here’s an article with more information about how to customize the TinyMCE toolbar.

Integrate with your favorite frameworks

Once you’ve got TinyMCE up and running, it’s easy to integrate it with any of your favorite frameworks. Here are some guides on how to get started with the most popular frameworks:

DesignWYSIWYG
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Text "Fonts" displayed five times, each in a different font.
    Design & UX

    Add a custom font family in TinyMCE

    by Ben Long in Design & UX
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor