# 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`文件。
```html
```
## 第二步：使用文本区域创建表单
在`index.php`文件中，我们将创建一个带有 Textarea 的表单来加载 TinyMCE 编辑器。
```html
```
## 第三步：初始化TinyMCE编辑器
在`tinymce_editor.js`文件中，我们将初始化 TinyMCE 编辑器，将 Textarea 转换为 TinyMCE WYSIWYG HTML 编辑器。
```javascript
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`到工具栏。
```javascript
setup: function(ed) {
ed.addButton('image_upload', {
tooltip: 'Upload Image',
icon: 'image',
onclick: function () {
fileInput.trigger('click');
}
});
}
```
## 第五步：处理图像浏览和上传
在`tinymce_editor.js`文件中，我们将实现在单击图像上传按钮时浏览图像的功能，并向文件发出 Ajax 请求以将`upload.php`图像上传到服务器并将图像插入到 TinyMCE 编辑器中。
```javascript
var fileInput = $('');
$(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('
');
}
}
});
reader.readAsDataURL(file);
});
```
## Step6：上传图片到服务器
在`upload.php`文件中，我们将实现将图像文件上传到服务器到`upload`文件夹中并返回响应作为上传的文件名的功能。
```php
```