跳转到主要内容

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 和自定义 Javascripttinymce_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;
  }
}
?>
无评论
回到顶部