Tinymce 编辑器添加自定义图片管理插件

1、添加插件

我们需要在tinymce的Plugins目录下新建一个filemanager文件夹，并添加一个名为plugin.min.js，其中editor传参后再图片管理页面通过var editor = top.tinymce.activeEditor.windowManager.getParams().editor; 获取编辑器对象，进行图片插入操作。

tinymce.PluginManager.add("filemanager", function (editor, url) {
    editor.addButton("filemanager", {
        title: "图片管理",
        icon: 'image',
        onclick: function () {
            editor.windowManager.open({
                title: "图片管理",
                url:  "/Administrator/Filemanager/Editor",
                width: window.innerWidth * 0.9,
                height: window.innerHeight * 0.8
            }, {
                    editor: editor // pointer to access editor from cshtml
            })
        }
    })
});

2、将选中图片插入编辑器

<script>
        //获取tinymce编辑器
        var editor = top.tinymce.activeEditor.windowManager.getParams().editor;

        layui.use(['upload'], function () {
            var upload = layui.upload;
            var dirId = $("#dirId").val() == "" ? 0 : $("#dirId").val();
            upload.render({ //允许上传的文件后缀
                elem: '#upload-img-btn'
                , url: 'UploadImage?dirId='   dirId
                , accept: 'file' //普通文件
                , multiple: true
                , size: 1024 * 2 //限制文件大小，单位 KB
                , exts: 'jpg|jpeg|png|gif' //只允许上传压缩文件
                , done: function (res) {
                    if (res.code == 0) {
                        window.location.reload();
                    }
                }
            });

            //删除图片
            $("#delete-img-btn").click(function () {
                var checkeds = [];
                $("input[name='file-id']:checkbox").each(function () {
                    if (true == $(this).is(':checked')) {
                        checkeds.push({
                            id: $(this).data('id'),
                            type: $(this).data('type')
                        });
                    }
                });
                if (checkeds.length == 0) {
                    layer.alert('请先选择需要删除的文件！');
                }
                else {
                    layer.confirm('删除后将无法恢复，请确认是否要删除所选文件？', {
                        btn: ['确定删除', '我在想想'] //按钮
                    }, function () {
                        $.ajax({
                            type: 'post',
                            url: 'CheckedFilesDelete',
                            data: { checkeds : checkeds },
                            success: function (result) {
                                if (result.code == 0) {
                                    window.location.reload();
                                }
                                else {
                                    showMsg(result.msg);
                                }
                            }
                        })
                    }, function () {
                    });
                }
            })
        })

        //添加图片至编辑器
        $(".file-img").click(function () {
            var url = $(this).data("url"),
                title = $(this).data("title");

            //添加确认
            layer.confirm('是否需要添加此图片？', {
                btn: ['确认添加', '我在想想'] //按钮
            }, function () {
                editor.execCommand('mceInsertContent', false, '<img alt="'   title   '" src="'url   '"/>');
                editor.windowManager.close();
            }, function () {});
        })
        
    </script>

转自：https://blog.csdn.net/qq_45670012/article/details/101991421