Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to add a WYSIWYG editor to your website with TinyMCE

Joe Robinson

January 11th, 2022

Written by

Joe Robinson

Category

How-to Use TinyMCE

Text areas and text entry are extremely important parts of communication. Every person using the internet encounters text entry options. Advanced text entry options are even better – 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, which provides a host of features for writing and expression. Thankfully, It’s easy to add a WYSIWYG editor into a website when you have the right tools available to you.

You can integrate the TinyMCE WYSIWYG into any website, and 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.

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.

However, depending on your website plans, business goals, and client needs, it can be hard to know what exactly to expect from including TinyMCE – especially if you’re still understanding HTML and JavaScript modification.

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. But what’s important is to take a step back out of the confusing storm of information, and to look at key terms and essential website components. You can then start to unravel the process and understand what to do when planning to add TinyMCE to your website.

Key terms for the TinyMCE WYSIWYG

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 that 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/5/tinymce.min.js

Adding TinyMCE 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/5/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/5/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/5/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.

WYSIWYGHTML
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCE

    How to load and post Ajax content in TinyMCE

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

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
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing