tinymce添加图片上传
时间: 2023-08-29 20:13:41 浏览: 43
TinyMCE是一个开源的富文本编辑器,它提供了许多强大的功能,包括上传图片。要在TinyMCE中添加图片上传功能,需要以下步骤:
1. 在TinyMCE的初始化代码中,添加一个图片上传插件。可以使用现成的插件,如`image`插件或自定义插件。
```javascript
tinymce.init({
selector: 'textarea',
plugins: 'image',
toolbar: 'image',
image_title: true,
automatic_uploads: true,
file_picker_types: 'image',
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
});
```
2. 在服务器上设置一个处理上传图片的脚本。这个脚本应该接收上传的图片文件,并将其保存到服务器上的某个位置。
3. 将脚本的URL添加到TinyMCE的初始化代码中,以便在上传图片时使用。
```javascript
tinymce.init({
...
images_upload_url: 'upload.php',
...
});
```
以上是一个基本的图片上传功能的实现步骤,你可以根据自己的需求进行相应的修改和扩展。