參考了這篇文章: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 | ...'
],
最終效果: