Introduction

inyMCE is a powerful and flexible Rich Text Editor (RTE) that allows users to create and format content directly within a web application. It provides a familiar editing experience with features such as text formatting, lists, links, images, tables, and other content-editing options.

In this tutorial, we will learn how to integrate the TinyMCE Rich Text Editor into a web page. We will cover both:

  • Static textarea initialization (loaded when the page loads)
  • Dynamic textarea initialization (loaded through AJAX)

This approach is useful when creating content management systems, blog editors, or any application that requires rich text editing capabilities.

Prerequisites

Before following this tutorial, make sure you have the following:

  • Basic knowledge of HTML and web page structure.
  • Basic understanding of JavaScript.
  • Basic knowledge of jQuery and AJAX.
  • Basic understanding of PHP, as the example uses a PHP file (tinyajax.php) to return the dynamically generated <textarea>.
  • A web server or local development environment capable of running PHP.
  • An internet connection to load the TinyMCE, jQuery, and Bootstrap libraries from their respective CDNs.

IMPLEMENTATION

Step 1: Include Required Libraries

Add the following JavaScript libraries inside the <head> section of your page.

<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>

Note: For production environments, it is recommended to use the latest version of TinyMCE and jQuery from their official sources.

Step 2: Add a Textarea and Button

Create a textarea that will be initialized with TinyMCE and a button that loads another textarea dynamically using AJAX.

<textarea></textarea>
<button onclick="ShowEditModal(this.id)" id="onclick">Submit</button>

Step 3: Initialize TinyMCE

Add the following TinyMCE configuration script.

<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'
});
</script>

Step 4: Load Dynamic Textarea Using AJAX

When the user clicks the button, an AJAX request loads a new textarea and reinitializes TinyMCE.

<script>
function ShowEditModal(id)
{
    $('#dynamic-content').html('');

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

        $('#dynamic-content').html(data);

        // Remove existing editor instances
        tinymce.EditorManager.editors = [];

        // Reinitialize TinyMCE for dynamically added textarea
        tinymce.init({
            selector: 'textarea'
        });

    })
    .fail(function() {
        console.log('Failed to load content.');
    });
}
</script>

tinyajax.php

This file returns the textarea that will be loaded dynamically through AJAX.

<textarea></textarea>

Complete Example (index.php)

<!DOCTYPE html>
<html>
<head>
    <title>TinyMCE Editor Example</title>

    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <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>
</head>

<body>

<form action="#" method="POST">

    <div class="form-group">
        <label>Onload Textarea</label>

        <textarea id="description1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan.
        </textarea>
    </div>

    <div id="dynamic-content"></div>

    <button onclick="ShowEditModal(this.id)"
            id="onclick"
            type="button"
            class="btn btn-primary">
        Load Dynamic Editor
    </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('');

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

        $('#dynamic-content').html(data);

        tinymce.EditorManager.editors = [];

        tinymce.init({
            selector: 'textarea'
        });

    })
    .fail(function() {
        console.log('Failed to load content.');
    });
}
</script>

</body>
</html>

Output

When the page loads, TinyMCE is initialized on the existing textarea. After clicking the button, a new textarea is loaded via AJAX and TinyMCE is automatically applied to it as well.

This method allows you to use TinyMCE with both static and dynamically generated textareas without refreshing the page.

Conclusion

In this tutorial, we learned how to integrate TinyMCE into a web page and initialize it for both static and dynamically loaded textareas using AJAX. This approach enables rich text editing without requiring a page refresh.

Post Views: 347

Leave a Reply