Загрузка изображений в TinyMCE с помощью Ajax и PHP

В предыдущем уроке мы объяснили, как использовать редактор TinyMCE для сохранения контента с помощью Ajax, PHP и MySQL . В этом уроке мы расскажем, как реализовать загрузку изображений в редакторе TinyMCE с помощью Ajax и PHP .

TinyMCE — это широко известный WYSIWYG HTML-редактор, который активно используется в веб-приложениях для создания HTML-контента. Он поддерживает форматирование текста, вставку таблиц, ссылок, изображений и многое другое.

TinyMCE имеет множество плагинов, позволяющих вставлять изображения в редактор из различных источников. Однако, возможность выбора изображения и его загрузки на сервер для вставки в редактор не предусмотрена. Для этого нам необходимо разработать собственный функционал.

Итак, если вы ищете решение для загрузки изображений в редактор TinyMCE, то вы попали по адресу.

В этом уроке мы шаг за шагом с помощью демонстрации в реальном времени покажем, как загрузить изображение из редактора TinyMCE и вставить его в редактор.

Итак, давайте реализуем загрузку изображений в TinyMCE с помощью Ajax и PHP. Основные файлы:

• index.php : PHP-файл для загрузки редактора TinyMCE.
• tinymce_editor.js : JavaScript-файл для инициализации редактора TinyMCE и загрузки изображений с помощью Ajax.
• upload.php : PHP-файл для обработки загрузки изображений на сервер.

Мы скачали редактор TinyMCE, сохранили его в папку tinymce и подключили к index.php файлу. Также мы подключим jQuery и пользовательский tinymce_editor.js файл JavaScript.

tinymce_editor.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="tinymce/tinymce.min.js"></script><script src="tinymce/tinymce.min.js"></script>
<script src="js/tinymce_editor.js"></script><script src="js/tinymce_editor.js"></script>

В index.php файле мы создадим форму с текстовым полем для загрузки редактора TinyMCE.

index.php

<div class="container">	 class="container">	
	<div class="row">					<div class="row">					
		<form id="posts" name="posts" method="post"><form id="posts" name="posts" method="post">
			<textarea name="message" id="message"></textarea><br>				<textarea name="message" id="message"></textarea><br>				
		</form>		</form>		
	</div>	</div>	
</div></div>

В tinymce_editor.js файле мы инициализируем редактор TinyMCE, чтобы преобразовать текстовое поле в HTML-редактор TinyMCE WYSIWYG.

tinymce_editor.js

tinymce.init({.init({
	selector: "textarea",: "textarea",
	plugins: "code",: "code",
	toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code image_upload",: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code image_upload",
	menubar:false,:false,
    statusbar: false,: false,
	content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
	height: 200: 200
});});

В tinymce_editor.js файле мы реализуем функциональность для добавления значка загрузки изображения на панель инструментов TinyMCE. Нам также потребуется добавить название кнопки image_upload на панель инструментов.

tinymce_editor.js

setup: function(ed) {		: function(ed) {		
	ed.addButton('image_upload', {.addButton('image_upload', {
		tooltip: 'Upload Image',: 'Upload Image',
		icon: 'image',: 'image',
		onclick: function () {: function () {
			fileInput.trigger('click');.trigger('click');
		}}
	});});
}}

В tinymce_editor.js файле мы реализуем функциональность для выбора изображения при нажатии кнопки загрузки изображения, выполнения Ajax-запроса к upload.php файлу для загрузки изображения на сервер, а также для вставки изображения в редактор TinyMCE.

tinymce_editor.js

var fileInput = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">'); fileInput = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
$(ed.getElement()).parent().append(fileInput);(ed.getElement()).parent().append(fileInput);
 
fileInput.on("change",function(){			.on("change",function(){			
	var file = this.files[0];var file = this.files[0];
	var reader = new FileReader();			var reader = new FileReader();			
	var formData = new FormData();var formData = new FormData();
	var files = file;var files = file;
	formData.append("file",files);.append("file",files);
	formData.append('filetype', 'image');				.append('filetype', 'image');				
	jQuery.ajax({.ajax({
		url: "upload.php",: "upload.php",
		type: "post",: "post",
		data: formData,: formData,
		contentType: false,: false,
		processData: false,: false,
		async: false,async: false,
		success: function(response){: function(response){
			var fileName = response;var fileName = response;
			if(fileName) {if(fileName) {
				ed.insertContent('<img src="upload/'+fileName+'"/>');.insertContent('<img src="upload/'+fileName+'"/>');
			}}
		}}
	});		});		
	reader.readAsDataURL(file);	 .readAsDataURL(file);	 
});

В upload.php файле мы реализуем функциональность для загрузки файла изображения на сервер в uploadпапку и возврата ответа в виде имени загруженного файла.

upload.php

<?php
$fileName = $_FILES['file']['name'];= $_FILES['file']['name'];
$fileType = $_POST['filetype'];= $_POST['filetype'];
if($fileType == 'image'){if($fileType == 'image'){
  $validExtension = array('png','jpeg','jpg');= array('png','jpeg','jpg');
}}
$uploadDir = "upload/".$fileName;= "upload/".$fileName;
$fileExtension = pathinfo($uploadDir, PATHINFO_EXTENSION);= pathinfo($uploadDir, PATHINFO_EXTENSION);
$fileExtension = strtolower($fileExtension);= strtolower($fileExtension);
if(in_array($fileExtension, $validExtension)){if(in_array($fileExtension, $validExtension)){
   if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadDir)){ if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadDir)){ 
    echo $fileName;;
  }}
}}
?>

• Ссылка на оригинальную статью
• Загрузка изображений в TinyMCE с помощью Ajax и PHP

——————————————