- 简单，没有那么多花里胡哨的 UI
- 支持上传的进度
- 支持拖拽上传，不影响原图片插件的拖拽
使用此插件，需要关注 4 个参数配置
示例： 限制上传大小为 100M
tinymce.init({
attachment_max_size: 100 * 1024 * 1024
});
示例:
tinymce.init({
attachment_assets_path: 'assets/icons/'
});
| 参数名 | 类型 | 说明 |
|---|---|---|
| file | object | 上传的文件对象 |
| successCallback | Function | 上传成功的回调函数, 参数为该文件下载地址。 |
| failureCallback | Function | 上传失败的回调函数，参数为错误信息。 |
| progressCallback | Function | 上传进度回调函数，参数为进度的百分比。 |
以使用 axios 为例：
const axios = require('axios');
tinymce.init({
attachment_upload_handler: upload(file, successCallback, failureCallback, progressCallback) {
axios.post('/upload_hander', {
data: file,
onUploadProgress: function(e) {
const progress = (e.loaded / e.total * 100 | 0) + '%';
progressCallback(progress);
}
}).then((response) => {
successCallback(response.data.url);
}).catch((error) => {
failureCallback(`上传失败:${error.message}`)
});
}
});
示例：如下配置文件
tinymce.init({
content_css: 'tinymce/skins/content/snow/content.css',
});
则需要在 tinymce/skins/content/snow/content.css 文件中添加如下 css 即可：
.attachment {
cursor: pointer !important;
}
.upload_error {
background: #FFE5E0;
border: 1px solid #EA644A;
}
.attachment > img {
width: 16px;
vertical-align: middle;
padding-right:4px;
}
.attachment > a {
text-decoration: none;
vertical-align: middle;
}
.attachment > span {
vertical-align: middle;
padding-right:4px;
}
选择文件上传后，会往编辑区插入一段不可编辑的文本。
contenteditable = 'false'
此时按 Backspace 可能会出现不能删除或者光标跳到首行的情况， 该问题是编辑器的 BUG，与本插件无关。
MIT