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:
Then, when the content is saved and published to a page, it might look like this:
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:
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:
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
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 styles within the editor to match your published content - check out this article with information about working with CSS in TinyMCE
- Or get started with inline editing
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:
