tinymce富文本框照片上传

93 阅读 0 评论 62 点赞

我是靠谱客的博主落寞茉莉，这篇文章主要介绍tinymce富文本框照片上传，现在分享给大家，希望可以做个参考。

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala

中文官网路径 TinyMCE中文文档中文手册

英文官网路径 The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE

我 TinyMCE版本用的是最新版本 TinyMCE5 和 TinyMCE6的最大区别是自定义图片上传发生了改版。

1. TinyMCE5版本自定义上传

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
tinymce.init({
selector: '#tinydemo',
plugins: 'image',
toolbar: 'image',
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/demo/upimg.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
succFun(json.location);
};
formData = new FormData();
formData.append('file', file, file.name );//此处与源文档不一样
xhr.send(formData);
}
});

2.TinyMCE6版本自定义上传

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'postAcceptor.php');
xhr.upload.onprogress = (e) => {
progress(e.loaded / e.total * 100);
};
xhr.onload = () => {
if (xhr.status === 403) {
reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
reject('HTTP Error: ' + xhr.status);
return;
}
const json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
reject('Invalid JSON: ' + xhr.responseText);
return;
}
resolve(json.location);
};
xhr.onerror = () => {
reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
});
tinymce.init({
selector: 'textarea',
// change this value according to your HTML
images_upload_handler: example_image_upload_handler
});

我项目是springBoot+layui

java后端

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@PostMapping("tinymce/upload")
@ResponseBody
public Map<String, String> tinymceUpload(MultipartFile file){
if (file.isEmpty()) {
System.out.println(11111);
}
String fileName = null;
fileName = System.nanoTime() + file.getOriginalFilename();
File dest = new File(wxAppConfig.getGoodsImageUploadPath(), fileName);
try {
file.transferTo(dest);
} catch (Exception e) {
System.out.println("上传失败");
}
Map<String, String> map = new HashMap<>();
map.put("location",fileName);
return map;
}

Layui:

复制代码

1
2
3
4
5
<div class="layui-form-item lay-form-text">
<label class="layui-form-label">描述：</label>
<textarea placeholder="商品详细展示设置"
name="comment" id="mytextarea"></textarea>
</div>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
let $ = layui.$;
$(function (){
tinymce.init({
selector: '#mytextarea',
language:'zh_CN',
images_upload_url: '../tinymce/upload',
images_upload_base_path: '/image',
file_picker_types: 'image',
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image
code codesample table
hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount
textpattern help emoticons autosave
autoresize
axupimgs',
toolbar: ' undo redo restoredraft | forecolor backcolor bold italic underline strikethrough
anchor | alignleft aligncenter alignright alignjustify outdent indent | 
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | 
image
emoticons hr pagebreak insertdatetime print preview | fullscreen',
})
})
</script>