How to add a textarea editor to your website with TinyMCE

Text areas and text entry are extremely important parts of communication. Think about it – every person using the internet types into text entry options. They do this each day. Advanced text entry options are even better though – they are what gives your website visitors everything they need to express themselves.

TinyMCE provides an easy-to-configure ‘What You See Is What You Get” (WYSIWYG) editor. TinyMCE provides a host of features for writing and expression.

All you need is the right tools to add the editor to your blog, your website form, your survey...it fits into a lot of different use cases.

It does not require extensive HTML and JavaScript modification. You can either source TinyMCE from the Cloud, or from a self-hosted location on your server as well, depending on your needs.

Experienced or just starting out with JavaScript?

With the instructions from our Quickstart guide, you have everything you need to integrate TinyMCE into your website.

It's worth taking a minute to make an plan. A short list of where you need the editor to integration. And what actions your audience takes.

Cover at least these items in your plan:

1. Website layout
2. Business goals
3. Client needs in detail

If you’re an experienced client side web developer, the integration is a breeze. For anyone new to development, or in a developer-adjacent field, it can be hard to decipher what’s going on. Long links and scripts. Other HTML elements. But what’s important is to take a step back out of the confusing storm of information; look at key terms, and essential website components; look at a demo, and the code running under the demo.

Textarea editor with formatting controls

It can be hard to know what exactly to expect from including TinyMCE – especially if you’re still understanding HTML and JavaScript modification. Try out the textarea in the full featured demo to get an idea of what's possible:

Key terms for the WYSIWYG textarea editing

Textarea: An HTML tag that makes a plain text entry field on a webpage

CDN: Stands for Content Delivery Network - a set of servers across the internet that work together to send data to a website when requested.

Script: An HTML tag used to signal to the browser that code to run, usually JavaScript, is inside these tags.

Position: A design property of a website controlled with CSS. It allows you to put objects in a specific place on the web page layout.

Framework: Website building software widely adopted to speed up website development, and allow the focus to be on unique features instead of standard website components.

API Key: You need one to access TinyMCE plugins and the TinyMCE WYSIWYG in your web page. Sign up for one when you’re ready to try out TinyMCE on your website.

Understanding textarea editor tags

First, it’s important to understand the textarea HTML element.

It’s a tag that a browser interprets, and translates into a walled-off writing area. Clients using a website can enter large amounts of text, composing sentences and longer writing pieces, when a text area loads into the browser.

Look closely at the textarea editor tag, and think about what your customers and clients goal is when they use your website. Ask if they need to enter a small amount of text, or if they will need to enter any combination and length of letters, numbers, and symbols. If the second description is true, you need to add a textarea editor to your website. 

Including the selector option for TinyMCE represents the most important part of understanding how TinyMCE integrates into websites. By specifying ‘textarea’ as the value for the ‘selector’ option, TinyMCE transforms the default textarea into a WYSIWYG editor. 

selector: '#mytextarea'

The new WYSIWYG textarea then allows editing, writing, formatting, and access to an array of other features.

Adding the WYSIWYG editor to your website

Placement of elements is vital, and position is something that needs to be iterated on to produce the best result. A good measurement of the effectiveness of your placement, especially for mobile friendly design, is to test how easily your clients and customers can get what they need done.

Consider the absolute position of the textarea. In design terms, absolute position is a design property that you can control with your website CSS.

Wherever you place your textarea tags in the document will be where the TinyMCE WYSIWYG appears. You can adjust the width and height of the textarea shape on the page if needed.

Working with the TinyMCE CDN link

CDN stands for Content Delivery network. It’s a network of servers connected across the internet. The server stores duplicates of data, and the servers work out which server is closest to the request point, which makes the data transfer as efficient as possible. TinyMCE makes use of a CDN to deliver the WYSIWYG editor to websites and apps quickly.

The script tags used before and after the CDN content are used in HTML to signify code to run when the website loads. It is typically used with JavaScript.

The CDN also requires an API key. You can sign up for a free API key anytime. Replace the ‘no-api-key’ content with your API key from the TinyMCE dashboard:

https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js

Adding textarea editor into an existing website

Take the following script, and copy it into the <head> tags inside your index.html file:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

It should look like the following. This example adds in the date and time plugin:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adding TinyMCE to your website: the basics</title>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
tinymce.init({
selector: "textarea",
plugins: [
"insertdatetime"
],
width: 700,
height: 400,
</script>
</head>

What to do if your website does not have a clear index file

Not all websites have an index.html file. If you’re aiming to explore professional web development, more efficient methods and practices are used in production to develop the client side of websites.

For example, you might encounter websites that have different configurations, and different 

languages such as TypeScript (.ts format files) and PHP (.php format files).

Handling TypeScript

Typescript is a superset of JavaScript and is useful because it allows website builders to enforce strict terminology in their code. For websites built from TypeScript, your syntax for adding TinyMCE might resemble the following:

<editor apiKey="your-api-key"
[init]={ plugins: [
"insertdatetime"
],
width: 700,
height: 400, } ></editor>

If the website you’re adding TinyMCE to uses TypeScript, it’s likely that it was built with a Framework. Frameworks allow developers to focus on unique features instead of spending time on the common, accepted features of a website. Tiny has a direct integration for the well known framework that uses TypeScript: Angular.

Handling PHP

PHP is a general purpose scripting code aimed toward web development.

If you’re website is built from PHP, the PHP syntax to include tinymce in your index.php file could resemble the following: 

<script src="https://cloud.tinymce.com/6/tinymce.min.js?apiKey=<?php echo $config["apiKey"]; ?>"></script>
<script src="./init.js"></script>

Like in this example, you can store your API key in a separate configuration file and refer to it with the PHP syntax. If you have a server set up running your PHP website, TinyMCE will load as long as you reference the configuration file in your index.php file.

TinyMCE also has a Laravel project integration for when you’re ready.

Taking the next step

If your aim is to explore professional web development, learning about frameworks in production is the next step to look into.

And if you’re ready to try out TinyMCE, you can sign up for a free API key anytime.