How to Integrate TinyMCE Editor into a Webpage Using jQuery and AJAX

Post Date: February 17, 2017
Last Updated: September 28, 2026

Introduction

TinyMCE is a popular JavaScript-based WYSIWYG editor that can be integrated into web pages to provide rich text editing functionality. It allows users to format text, add links, images, lists, tables, and other content without requiring HTML knowledge.

In this post, we will explain how to integrate the TinyMCE editor into a webpage. The example demonstrates how to use TinyMCE with both a static textarea and a dynamically generated textarea loaded using an AJAX request.

Prerequisites

Before integrating TinyMCE, make sure you have the following:

• Basic knowledge of HTML, CSS, and JavaScript.
• Basic understanding of jQuery and AJAX.
• A web server or local development environment capable of running PHP.
• jQuery library included in the webpage.
• TinyMCE JavaScript library included in the webpage.
• Basic understanding of PHP if you are using the provided tinyajax.php example to generate the dynamic textarea.

Implementation

In this post, we will explain how to integrate TinyMCE into a webpage.

In this example, we add two types of textara one is static, and the other is dynamic, with the TinyMCE editor

First Step: create a new file and include the script source files inside the head

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

Second step: add one textarea field and a button with an onclick event inside the body tag

[script]
<textarea></textarea>
<button onclick="ShowEditModal">Submit</button>
[/script]

Third step: add the TinyMCE init function and create the ShowEditModal function. When the user clicks the button, the ShowEditTextarea function executes; this function creates a dynamic textarea.

<script>
tinymce.init({
selector: 'textarea',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});

function ShowEditModal(id)
{
  var uid =id; // it will get id of clicked row
  $('#dynamic-content').html(''); // leave it blank before ajax call
  $.ajax({
   url: 'tinyajax.php',
   type: 'POST',
   data: 'id='+id,
   dataType: 'html'
  })
  .done(function(data){
   console.log(data);
   $('#dynamic-content').html('');
   $('#dynamic-content').html(data); // load response
   tinymce.EditorManager.editors = [];
   tinymce.init({selector:'textarea'});//this will reinitialze tinymce
   })
   .fail(function(){
   });
}
</script>

tinyajax.php

This page returns the textarea field to the respective AJAX call

<textarea><textarea>

Give us index.php like this

<!DOCTYPE html>
 <html>
 <head>
 <title>TinyMce Editor</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="all">
 <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

</head>
 <body>
 <form action="#" method="POST" role="form">

<div class="form-group">
 <label for="">Onload Textare</label>
 <textarea class="tinymce-enabled-message" cols="80" id="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo.</textarea>
 </div>
<div id="dynamic-content"></div><!-- This Tag Dispaly dynamic textarea with tinymce editor window -->
 <button onclick="ShowEditModal(this.id)" id="onclick" type="submit" class="btn btn-primary">Submit</button>
 </form>
 <script>
 tinymce.init({
 selector: 'textarea',
 height: 500,
 menubar: false,
 plugins: [
 'advlist autolink lists link image charmap print preview anchor',
 'searchreplace visualblocks code fullscreen',
 'insertdatetime media table contextmenu paste code'
 ],
 toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
 });
function ShowEditModal(id)
 {

$('#dynamic-content').html(''); // leave it blank before ajax call

$.ajax({
 url: 'tinyajax.php',
 type: 'POST',
 data: 'id='+id,
 dataType: 'html'
 })
 .done(function(data){

console.log(data);
 $('#dynamic-content').html('');
 $('#dynamic-content').html(data); // load response
 tinymce.EditorManager.editors = [];

tinymce.init({selector:'textarea'});//this will reinitialze tinymce

//applyMCE();

})
 .fail(function(){

});

}

</script>
 </body>
 </html>

Conclusion

In this post, we demonstrated how to integrate TinyMCE into a webpage and initialize it on a static textarea. We also covered how to dynamically load another textarea using AJAX and reinitialize TinyMCE for the newly generated textarea.

This approach can be useful when textarea fields are created or loaded dynamically and require the TinyMCE editor functionality.

FAQs

1. What is TinyMCE?
TinyMCE is a JavaScript-based WYSIWYG editor that allows users to create and format rich text content using a web-based interface.

2. How do I add TinyMCE to a webpage?
Include the TinyMCE JavaScript library in the <head> section and initialize it using tinymce.init() with the appropriate textarea selector.

3. Can TinyMCE be used with multiple textarea fields?
Yes. TinyMCE can be initialized on multiple textarea fields by using a suitable CSS selector.

Talk to our experts

Looking for the right technology solution for your business?. Our experts can help with web hosting, domain registration, DevOps and cloud, software development, web applications, mobile applications, and enterprise solutions. Get in touch with our team here.