How to turn HTML Textarea to a Rich-Text (WYSIWYG) editor
HTML forms are an essential part of web development, allowing users to interact with websites by entering data.
The most commonly used HTML form elements include <input>, <select>, and <textarea>.
The <input> element enables users to provide different types of information such as single-line text (eg. name, phone number, email, password, etc), checkboxes (for selecting one or multiple options), radio buttons (for selecting mutually exclusive options), and file input (for uploading files from local storage) depending on the type attribute used.
The <select> element creates a dropdown menu for selecting a single option from a list.
The <textarea> element enables users to enter multi-line text.
While the <textarea> element allows user to enter as much text as they would like, in some cases, you may need to add advanced features to it.
You most probably have seen textarea fields with an interface that resembles that of Microsoft Word or Google Docs. These are referred to as Rich Text Editors or WYSIWYG (What You See Is What You Get) editors.
Unlike plain textareas, rich text editors offer formatting options like bold, italic, underline, bullet points, tables, and much more. These editors generate HTML code behind the scenes to preserve the applied formatting.
Rich text editors are most applicable in scenarios where content creation requires advanced text formatting. They are mostly used in content management systems, blogging platforms, collaborative writing tools, and any application that involves the creation of styled documents.
It is very to convert HTML textareas to WYSIWYG by just adding few JavaScript lines.
Commonly Used Rich Text Editors
There exist numerous popular rich text editors that are widely used in web development. Some of the most popular are:
- TinyMCE
- CKEditor
- Froala
- Quill
- Summernote
- NicEdit
Adding Rich Text Editor to Textareas
In this article, we will cover integration with TinyMCE and CKEditor.
TinyMCE
TinyMCE is a highly customizable and feature-rich WYSIWYG editor. It offers a user-friendly and intuitive interface with a wide range of formatting options, including text styling, lists, tables, image embedding, and much more depending on your configuration.
TinyMCE functionalities can be extended through plugins and customizations, or limited to suit your use case.
The interface of TinyMCE can also be customized to look like part of your application.
Integration of TinyMCE in HTML Forms
To integrate TinyMCE into an HTML form, follow these steps:
Step 1: Create an HTML <textarea> element
You will need to have a textearea element on your page that you will integrate with TinyMCE. You can have several if you want.
<textarea id="myTextarea"></textarea>
Step 2: Include the required TinyMCE JS file.
Create an account on the TinyMCE website. When logged in, scroll down to the bottom of the Dashboard page and copy the API Key.
Include the line of code below in the <head> section of your webpage or before the closing </body> tag.
<script src="https://cdn.tiny.cloud/1/API_KEY/tinymce/6/tinymce.min.js"></script>
Make sure to replace "API_KEY" with your own API key that you copied from your TinyMCE account.
The "6" in the URL represents version 6, which is the latest version at the time of writing this article.
Step 3: Initialize TinyMCE on the textarea
To initialize TinyMCE on textareas, add the JavaScript code below:
tinymce.init({
selector: '#myTextarea'
});
In the above code, "#myTextarea" represents the ID of the textarea element that you want to turn into a rich-text editor. Make sure to use the ID of your textarea if different.
The initialization code should be below the line including the TinyMCE JS file on the page.
If you have more than one textarea element and you want to turn them all into rich-text editors, then use "textarea" as the selector instead in the initialization.
On loading your page in a web browser, your textarea elements will automatically be converted to rich-text editors and will look as below:
CKEditor
CKEditor is a powerful and versatile rich text editor that offers a user-friendly editing experience on web pages or online applications.
It's robust and provides every type of WYSIWYG editing solution imaginable.
Similar to TinyMCE, CKEditor is highly customizable through plugins.
Integration of CKEditor in HTML Forms
To integrate CKEditor into an HTML form, follow these steps:
Step 1: Create an HTML <textarea> element
Create a textearea element in your page that you will integrate with CKEditor.
<textarea id="myTextarea"></textarea>
Step 2: Include the required JS file
Add the line below in the <head> section or before the closing </body> tag on your webpage to include CKEditor.
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/classic/ckeditor.js"></script>
This includes CKEditor version 5 which is the latest at the time of writing this article.
Step 3: Initialize CKEditor on the textarea
Add the following JavaScript code below where you have included the CKEditor file on your web page:
<script>
ClassicEditor
.create(document.querySelector("#myTextarea"))
.catch(error => {
console.error( error );
} );
</script>
In this initialization code "#myTextarea" represents the ID of the textarea element that you want to turn into a rich-text editor. Replace it with the one you have used in your case.
Alternatively, if you want to change all the textarea elements on the page into WYSIWYG editors, just use "textarea" as the query selector instead.
On loading the page on a web browser, the selected textarea element(s) will be turned to rich-text editor(s) like below.
That's it!
Now you know how to add rich text WYSIWYG editors to your web pages using TinyMCE and CKEditor. Try the two and find out which works best for you.
