TinyMCE Editor Upload Image with PHP & Ajax
TinyMCE is the world’s most popular open source web-based WYSIWYG editor. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. This example demonstrates the integration of upload image in TinyMCE Editor using
setup
handler with PHP upload functionality. In this tutorial, we will explain you how to use TinyMCE Editor Upload Image with PHP and Ajax.So let’s implement TinyMCE Editor Upload Image with PHP. look following folder and file structure:
- tinymce-upload-image-with-php-ajax
- assets
- css
- style.css
- tinymce.min.js
- custom.tinymce.js
- upload
- css
- templates
- header.php
- footer.php
- index.php
- upload.php
- assets
Step 1: Include jQuery and TinyMCE Plugins
1 2 |
<script src="assets/tinymce.min.js" referrerpolicy="origin"></script> <script src="assets/custom.tinymce.js"></script> |
Step 2: Create HTML Form with textarea
In
index.php
file, we will create a HTML Form with Textarea to load TinyMCE.
1 2 3 4 5 6 7 8 9 10 11 |
<form method="POST" class="tinymce-editor" id="tinymce-editor"> <div class="row align-items-center"> <div class="col-md-12 col-md-right"> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" rows="5" id="tiny-description" name="description"></textarea> </div> </div> </div> </div> </form> |
Step 3: Initialize TinyMCE Editor
TinyMCE editor can be added to a textarea element with the id
tiny-editor
using
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
tinymce.init({ selector: 'textarea#tiny-description', width:'100%', height: 250, plugins: [ "code ", "paste" ], toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code image_upload", menubar:false, statusbar: false, content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}", setup: function(editor) { var fileInput = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">'); jQuery(editor.getElement()).parent().append(fileInput); fileInput.on("change",function(){ var filename = this.files[0]; var reader = new FileReader(); var formData = new FormData(); var files = filename; formData.append("file",files); formData.append('filetype', 'image'); jQuery.ajax({ url: "upload.php", type: "post", data: formData, contentType: false, processData: false, async: false, dataType: 'json', success: function(json){ var fileName = json.file_path; if(fileName) { editor.insertContent('<img src="'+fileName+'"/>'); } } }); reader.readAsDataURL(filename); }); // add Button editor.ui.registry.addButton('image_upload', { icon: 'image', onAction: () => { fileInput.trigger('click'); } }); } }); |
Step 4: Complete HTML file named
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php include('templates/header.php'); ?> <script src="assets/tinymce.min.js" referrerpolicy="origin"></script> <script src="assets/custom.tinymce.js"></script> <section class="showcase"> <div class="container"> <div class="pb-2 mt-4 mb-2 border-bottom"> <h2>TinyMCE Editor Upload Image with PHP & Ajax</h2> </div> <form method="POST" class="tinymce-editor" id="tinymce-editor"> <div class="row align-items-center"> <div class="col-md-12 col-md-right"> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" rows="5" id="tiny-description" name="description"></textarea> </div> </div> </div> </div> </form> </div> </section> <?php include('templates/footer.php'); ?> |
Step 5: Create a file named upload.php
PHP Upload Image Handler
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?php // Allowed the origins to upload $accepted_origins = array("http://localhost", "https://webhaunt.com/"); // Images upload dir path $uploadFolder = "assets/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", "bmp"))){ header("HTTP/1.1 400 Invalid file extension!"); return; } // Accept upload if there was no origin, or if it is an accepted origin $filePath = $uploadFolder . $tmp['name']; move_uploaded_file($tmp['tmp_name'], $filePath); // return successful JSON. echo json_encode(array('file_path' => $filePath)); } else { header("HTTP/1.1 500 Server Error!"); } ?> |
Create
header.php
and footer.php
section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header and footer section.header.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <link rel="canonical" href="https://www.webhaunt.com/" /> <meta name="author" content="WebHaunt"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt-150x142.png" sizes="32x32" /> <link rel="icon" href="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt.png" /> <meta name="msapplication-TileImage" content="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt.png" /> <title>TinyMCE Editor Upload Image with PHP & AJAX | Web Haunt</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" /> <!-- Custom fonts for this template --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> <!-- Custom styles for this template --> <link href="assets/css/style.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;"> <div class="container"> <a class="navbar-brand font-weight-bold" href="https://webhaunt.com"><h1>Web Haunt</h1></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="https://webhaunt.com/">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://webhaunt.com/php-script-free-demo/">LIVE DEMO</a> </li> </ul> </div> </div> </nav> |
footer.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!-- Start Footer --> <footer class="footer bg-light footer-bg-dark"> <div class="container"> <div class="row"> <div class="col-lg-6 h-100 text-center text-lg-left my-auto"> <ul class="list-inline mb-2"> <li class="list-inline-item"> <a href="#">About</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Contact</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Terms of Use</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Privacy Policy</a> </li> </ul> <p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright © 2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://webhaunt.com/">WEBHAUNT.COM</a> All rights reserved.</p> </div> <div class="col-lg-6 h-100 text-center text-lg-right my-auto"> <ul class="list-inline mb-0"> <li class="list-inline-item mr-3"> <a href="#"> <i class="fab fa-facebook fa-2x fa-fw"></i> </a> </li> <li class="list-inline-item mr-3"> <a href="#"> <i class="fab fa-twitter-square fa-2x fa-fw"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fab fa-instagram fa-2x fa-fw"></i> </a> </li> </ul> </div> </div> </div> </footer> <!-- include Bootstrap core JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> </body> </html> |