参考了这篇文章:https://www.cnblogs.com/fhen/p/5809514.html,不过是4.x的版本。以下适合tinymce5.x的版本。
在tinymce的plugins目录下新建一个uploadimage文件夹,在该文件内新建一个plugin.min.js文件
内容如下:
(function () {
'use strict';
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
function selectLocalImages(editor) {
var uploadurl = editor.getParam('images_upload_url', '', 'string');
var dom = editor.dom;
var input_f = $('<input type="file" name="Filedata[]" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="multiple">');
input_f.on('change', function () {
var form = $("<form/>",
{
action: uploadurl, //设置上传图片的路由,配置在初始化时
style: 'display:none',
method: 'post',
enctype: 'multipart/form-data'
}
);
form.append(input_f);
//ajax提交表单
form.ajaxSubmit({
beforeSubmit: function () {
return true;
},
success: function (data) {
editor.focus();
var json = JSON.parse(data);
json.forEach(function (row) {
editor.selection.setContent(dom.createHTML('img', {src: row.path}));
})
}
});
});
input_f.click();
}
var register$1 = function (editor) {
editor.ui.registry.addButton('uploadimage', {
icon: 'image',
tooltip: '上传图片',
onAction: function () {
selectLocalImages(editor)
}
});
editor.ui.registry.addMenuItem('uploadimage', {
icon: 'image',
text: '上传图片',
onAction: function () {
selectLocalImages(editor)
}
});
};
var Buttons = { register: register$1 };
function Plugin () {
global.add('uploadimage', function (editor) {
Buttons.register(editor);
});
}
Plugin();
}());
组件初始化时,在plugins中添加uploadimage,同时在toolbar中也添加uploadimage,关键代码如下所示:
tinymce.init({
...
plugins: "...uploadimage",
toolbar: [
'... | uploadimage | ...'
],
最终效果:

本文介绍如何为TinyMCE 5.x版本的富文本编辑器添加图片上传功能。通过创建uploadimage插件,实现从本地选择图片并上传至指定URL,成功后将图片插入编辑器中。
834





