Code Playground.

An HTML editor is a software for enhancing HTML, the markup of an internet web page. It stands for Tiny Moxiecode Content Editor. TinyMCE is a effective and flexible rich text HTML editor. In this tutorial, you will discover ways to Upload Image in TinyMCE HTML Editor the usage of PHP. This is a very easy instance, you may simply replica paste and trade in line with your requirement.

Before started out to implement the Upload Image in TinyMCE Editor the use of 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 enhancing revel in

Step 1: Include the TinyMCE script(plugin)

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

Step 2: TinyMCE editor can be delivered to a textarea detail with the identification rich-editor the use of:.

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 a success add.

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>

Step 2: PHP Upload Image Handler (add.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 Image Upload using TinyMCE Editor – Output