TinyMCE 使用 Ajax 和 PHP 上传图像

TinyMCE 是众所周知的所见即所得 HTML 编辑器，广泛用于 Web 应用程序中创建 HTML 内容。它支持文本格式化、表格插入、链接插入、图像插入等功能。 

 TinyMCE 有许多插件，允许通过不同的来源将图像插入编辑器。但不允许浏览图像并上传到服务器以插入编辑器。为此，我们需要开发自己的功能。 

 用Ajax和PHP来实现TinyMCE图片上传。主要文件有： 

 

 index.php ：用于加载 TinyMCE 编辑器的 PHP 文件。 

 tinymce_editor.js ：用于初始化 TinyMCE 编辑器和图像上传 Ajax 的 JavaScript 文件。 

 upload.php ：用于处理图像上传到服务器的 PHP 文件。 

 

 第 1 步：包含 TinyMCE 和 jQuery 

 我们已经下载了 TinyMCE 编辑器并存储到文件夹中 tinymce 并包含到 index.php 文件中。我们还将包括 jQuery 和自定义 Javascript tinymce_editor.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="js/tinymce_editor.js"></script> 

 第二步：使用文本区域创建表单 

 在 index.php 文件中，我们将创建一个带有 Textarea 的表单来加载 TinyMCE 编辑器。 

 <div class="container">	

	<div class="row">					

		<form id="posts" name="posts" method="post">

			<textarea name="message" id="message"></textarea><br>				

		</form>		

	</div>	

</div> 

 第三步：初始化TinyMCE编辑器 

 在 tinymce_editor.js 文件中，我们将初始化 TinyMCE 编辑器，将 Textarea 转换为 TinyMCE WYSIWYG HTML 编辑器。 

 tinymce.init({

	selector: "textarea",

	plugins: "code",

	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;}",

	height: 200

}); 

 第四步：添加图片上传按钮 

 在 tinymce_editor.js 文件中，我们将实现向 TinyMCE 工具栏添加图像上传图标的功能。我们还需要将按钮名称添加 image_upload 到工具栏。 

 setup: function(ed) {		

	ed.addButton('image_upload', {

		tooltip: 'Upload Image',

		icon: 'image',

		onclick: function () {

			fileInput.trigger('click');

		}

	});

} 

 第五步：处理图像浏览和上传 

 在 tinymce_editor.js 文件中，我们将实现在单击图像上传按钮时浏览图像的功能，并向文件发出 Ajax 请求以将 upload.php 图像上传到服务器并将图像插入到 TinyMCE 编辑器中。 

 var fileInput = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');

$(ed.getElement()).parent().append(fileInput);

fileInput.on("change",function(){			

	var file = this.files[0];

	var reader = new FileReader();			

	var formData = new FormData();

	var files = file;

	formData.append("file",files);

	formData.append('filetype', 'image');				

	jQuery.ajax({

		url: "upload.php",

		type: "post",

		data: formData,

		contentType: false,

		processData: false,

		async: false,

		success: function(response){

			var fileName = response;

			if(fileName) {

				ed.insertContent('<img src="upload/'+fileName+'"/>');

			}

		}

	});		

	reader.readAsDataURL(file);	 

});	 

 Step6：上传图片到服务器 

 在 upload.php 文件中，我们将实现将图像文件上传到服务器到 upload 文件夹中并返回响应作为上传的文件名的功能。 

 <?php

$fileName = $_FILES['file']['name'];

$fileType = $_POST['filetype'];

if($fileType == 'image'){

 $validExtension = array('png','jpeg','jpg');

}

$uploadDir = "upload/".$fileName;

$fileExtension = pathinfo($uploadDir, PATHINFO_EXTENSION);

$fileExtension = strtolower($fileExtension);

if(in_array($fileExtension, $validExtension)){

 if(move_uploaded_file($_FILES['file']['tmp_name'],$uploadDir)){ 

 echo $fileName;

 }

}

?>