How to add a WYSIWYG editor to your PHP website

January 24th, 2023

3 min read

Despite being more than 25 years old at the time of this article, PHP has remained an essential for the servers that support websites around the world. One possible reason for PHP’s perpetual use could be its reliable performance for problem solving. For instance, its flexibility when entering content, centers on two steps:

Registering content entered into a text editor for PHP to parse
Updating that content on the server for reuse later on

These are essential website behaviors that text editors for PHP perform everyday. And usually websites need more than just simple text editors for PHP – they also need to have WYSIWYG capability (What You See Is What You Get).

You may also need a WYSIWYG that provides more specific features that are tailored to what your users need in their content work. If that's the case, you can use the TinyMCE rich text editor for PHP website and server interaction, with minimal time commitment.

TinyMCE is a flexible rich text editor that works for a variety of use cases. This article explains how to get started, using TinyMCE as your PHP website’s WYSIWYG editor.

Text editor for PHP websites prerequisites

There are a few prerequisites to check on to before trying the demo:

PHP installed on your development workstation
A free TinyMCE API key. This key gives you free access to TinyMCE premium plugins for 14 days. Get a free TinyMCE WYSIWYG editor API key.
A text editor for PHP editing, such as VS Code or Sublime text.

You can verify if PHP is already installed, and what version you are using, by running the following command inside the command line terminal:

php - v;

You should receive something like the following response if you have it installed:

PHP V.V.V (cli) (built: MON  D YYYY HH:MM:SS) (NTS)

Copyright (c) The PHP Group

Zend Engine vX.X.X, Copyright (c) Zend Technologies with Zend OPcache vY.Y.Y, Copyright (c), by Zend Technologies

How to add TinyMCE as your text editor for PHP

Create a new project folder, and change into the new project:

mkdir TextEditorForPHP/
cd TextEditorForPHP

Create a new file in the project folder called index.php

touch index.php

Open your PHP file, and add the following to get started:

<?php
   $config = array();
   //Replace the "your-api-key" string with your API key from your TinyMCE account 
   //Doing so grants you 14 days FREE access to premium TinyMCE plugins
  $config["apiKey"] = "your-api-key";
  ?>

Note: For the Tiny Cloud connection, creating an account with TinyMCE gets you a FREE API key. When you use this key, you get access to Premium TinyMCE plugins for 14 days, as well as no warning messages concerning API keys in the text area.

Then, add HTML to form the page around the text editor:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>TinyMCE PHP Editor</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container mt-3 mb-3">
    <p>A TinyMCE editor instance.</p>
    <textarea></textarea>
  </div>

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

Save the changes.

The second script tag references a JavaScript file called “init.js”. This resource for the web page is where the specific TinyMCE configuration lives, and you can find the steps on writing the script in the next steps.

Adding the editor to your PHP website

In the same directory as your PHP editor project, create a new JavaScript file called “init.js”

touch init.js

Open the file in your text editor, and add the following TinyMCE configuration:

tinymce.init({
  selector: "textarea",
  plugins:
    "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export autosave",
  toolbar:
    "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
  height: "700px",
});

Save the changes
Test run the index.html file with on your workstation as a local project using the PHP command:

TinyMCE running in a PHP demo application

Working further on your text editor for PHP

With the editor working, the next steps you can take are to incorporate registering content into the rich text editor, parsing it and then saving it to the database. On Stack Overflow, Shivendra Singh created one solution for this process that you can use, now that you’ve established a demo PHP website that runs TinyMCE as a rich text editor.

For more information on PHP and TinyMCE, check on the following resources: