How to Upload Image in TinyMCE Editor using PHP

An HTML editor is a program for editing HTML, the markup of a web page. It stands for Tiny Moxiecode Content Editor. TinyMCE is a powerful and flexible rich text HTML editor. In this tutorial, you will learn how to Upload Image in TinyMCE HTML Editor using PHP. This is a very simple example, you can just copy paste and change according to your requirement.

Also Read : jQuery Fullcalendar Integration with Codeigniter and MySQL

Before started to implement the Upload Image in TinyMCE Editor using PHP, look files structure:

upload-image-in-tinymce-editor-using-php
- plugins
- skins
- themes
- upload
- jquery.tinymce.min.js
- custom.tinymce.js
- index.php
- upload.php

Features

Easy integration with your projects
Seamless markup integration
Predictable editing experience

Step 1: Include the TinyMCE script(plugin)

Include the following line of code in the of a HTML page.

	<script src="tinymce.min.js" referrerpolicy="origin"></script>

1	<script src="tinymce.min.js" referrerpolicy="origin"></script>

Step 2: TinyMCE editor can be added to a textarea element with the id rich-editor using:.

Java Script Code

images_upload_url : Specify a URL for the server-side upload handler.
images_upload_handler : This config overrides default upload handler to simulate successful upload.

tinymce.init({
    selector: '#rich-editor',
    width:'100%',
    height: 300,
    plugins: 'image code',
    browser_spellcheck : true,
    menu: {
        file: { 
            title: 'File', 
            items: 'newdocument restoredraft | preview | print' 
        },
        edit: { 
            title: 'Edit', 
            items: 'undo redo | cut copy paste | selectall | searchreplace' 
        },
        view: { 
            title: 'View', 
            items: 'code | visualaid visualchars visualblocks | preview fullscreen' 
        },
        insert: { 
            title: 'Insert', 
            items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' 
        },
        format: { 
            title: 'Format', 
            items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' 
        },
        tools: { 
            title: 'Tools', 
            items: 'code wordcount' 
        },
        table: { 
            title: 'Table', 
            items: 'inserttable | cell row column | tableprops deletetable' 
        },
        help: { 
            title: 'Help', items: 'help' 
        }
    },
    branding: false,
    mobile: {
        menubar: true
    },
    // upload image functionality
    images_upload_url: 'upload.php',
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'upload.php');
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            success(json.location);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    },
});

tinymce.init({

selector: '#rich-editor',

width:'100%',

height: 300,

plugins: 'image code',

browser_spellcheck : true,

menu: {

file: {

title: 'File',

items: 'newdocument restoredraft | preview | print'

edit: {

title: 'Edit',

items: 'undo redo | cut copy paste | selectall | searchreplace'

view: {

title: 'View',

items: 'code | visualaid visualchars visualblocks | preview fullscreen'

insert: {

title: 'Insert',

items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime'

format: {

title: 'Format',

items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat'

tools: {

title: 'Tools',

items: 'code wordcount'

table: {

title: 'Table',

items: 'inserttable | cell row column | tableprops deletetable'

help: {

title: 'Help', items: 'help'

}

branding: false,

mobile: {

menubar: true

// upload image functionality

images_upload_url: 'upload.php',

images_upload_handler: function (blobInfo, success, failure) {

var xhr, formData;

xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.open('POST', 'upload.php');

xhr.onload = function() {

var json;

if (xhr.status != 200) {

failure('HTTP Error: ' + xhr.status);

return;

}

json = JSON.parse(xhr.responseText);

if (!json || typeof json.location != 'string') {

failure('Invalid JSON: ' + xhr.responseText);

return;

}

success(json.location);

};

formData = new FormData();

formData.append('file', blobInfo.blob(), blobInfo.filename());

xhr.send(formData);

});

HTML Code

	<textarea id="rich-editor" name="description">Text...</textarea>

1	<textarea id="rich-editor" name="description">Text...</textarea>

Step 2: PHP Upload Image Handler (upload.php)

	<?php
	// Allowed the origins to upload 
	$accepted_origins = array("http://localhost", "https://techarise.com/");
	// Images upload dir path
	$imgFolder = "upload/";
	reset($_FILES);
	$tmp = current($_FILES);
	if(is_uploaded_file($tmp['tmp_name'])){
	    if(isset($_SERVER['HTTP_ORIGIN'])){
	        if(in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)){
	            header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
	        }else{
	            header("HTTP/1.1 403 Origin Denied");
	            return;
	        }
	    }
	    // check valid file name
	    if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $tmp['name'])){
	        header("HTTP/1.1 400 Invalid file name.");
	        return;
	    }
	    // check and Verify extension
	    if(!in_array(strtolower(pathinfo($tmp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){
	        header("HTTP/1.1 400 Invalid extension.");
	        return;
	    }
	  
	    // Accept upload if there was no origin, or if it is an accepted origin
	    $filePath = $imgFolder . $tmp['name'];
	    move_uploaded_file($tmp['tmp_name'], $filePath);
	    // return successful JSON.
	    echo json_encode(array('location' => $filePath));
	} else {
	    header("HTTP/1.1 500 Server Error");
	}
	?>

<?php

// Allowed the origins to upload

$accepted_origins = array("http://localhost", "https://techarise.com/");

// Images upload dir path

$imgFolder = "upload/";

reset($_FILES);

$tmp = current($_FILES);

if(is_uploaded_file($tmp['tmp_name'])){

if(isset($_SERVER['HTTP_ORIGIN'])){

if(in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)){

header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);

}else{

header("HTTP/1.1 403 Origin Denied");

return;

}

// check valid file name

if(preg_match("/([^\w\s\d\-_~,;:\[\].])|([\.]{2,})/", $tmp['name'])){

header("HTTP/1.1 400 Invalid file name.");

return;

}

// check and Verify extension

if(!in_array(strtolower(pathinfo($tmp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){

header("HTTP/1.1 400 Invalid extension.");

return;

}

// Accept upload if there was no origin, or if it is an accepted origin

$filePath = $imgFolder . $tmp['name'];

move_uploaded_file($tmp['tmp_name'], $filePath);

// return successful JSON.

echo json_encode(array('location' => $filePath));

} else {

header("HTTP/1.1 500 Server Error");

}

PHP Image Upload using TinyMCE Editor – Output

Demo Download