How to Add a WYSIWYG Editor in PHP Pages Using TinyMCE and Trumbowyg

A WYSIWYG (What You See Is What You Get) editor makes it easier for users to edit and format content on websites, blogs, or knowledgebase platforms — without writing raw HTML. Popular options like TinyMCE and Trumbowyg are free, customizable, and easy to integrate into any PHP-based application.

? 1. Add TinyMCE to a PHP Page

✅ Step 1: Include TinyMCE via CDN

      

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

✅ Step 2: Add the Textarea and Activate Editor

html
CopyEdit
<textarea name="content" id="editor"></textarea>

<script>
  tinymce.init({
    selector: '#editor',
    height: 300,
    plugins: 'advlist autolink lists link image charmap preview anchor code',
    toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | code'
  });
</script>

✅ Step 3: Handle in PHP

php
CopyEdit
$content = $_POST['content'] ?? '';
echo $content; // Save to DB or display

? 2. Add Trumbowyg to a PHP Page

✅ Step 1: Include Trumbowyg via CDN

html
CopyEdit
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/ui/trumbowyg.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/trumbowyg@2.25.1/dist/trumbowyg.min.js"></script>

✅ Step 2: Add the Textarea and Activate Editor

html
CopyEdit
<textarea id="trumbowyg_editor" name="content"></textarea>

<script>
  $('#trumbowyg_editor').trumbowyg();
</script>

✅ Step 3: Handle in PHP

php
CopyEdit
$content = $_POST['content'] ?? '';
echo $content;

? Use Cases:

• Blog post editors

• CMS backends

• Knowledgebase content

• Customer support ticket replies

• Email templates