tinymce5.x 上传本地图片(自己写个插件)

参考了这篇文章: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_f.on('change', function () {
            var 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 | ...'
          ],

最终效果:
tinymce5.x 上传本地图片(自己写个插件)_第1张图片

你可能感兴趣的:(js)