Question

我已经创建了一个插件来处理tinymce的图片上传。这一切都很好。我希望能够做的是从我的服务器中删除图像，如果它被用户删除，那么我最终不会得到孤立文件的演出。

我已经能够使用tinymce init

的setup部分来监听nodechange envent

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: "autoresize",

    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
    relative_urls: false,
        setup : function(ed) {
                    ed.on("NodeChange", function(e) {
        console.log('change event', e);
               });
}

});</script>

这给了我一个事件，我可以在控制台中看到，但是我找不到从事件中获取某些东西的方法告诉我已经执行了img删除，以便我可以从服务器中删除图像

我在这里创造了一个小提琴HERE

如果您加载控制台并删除图像，您将看到我的意思。是否有一些我失踪的事件的属性或方法？

先谢谢

Answer 1

我试图做同样的事情，但经过大量的网络拖网和调试我能看到实现这一目的的唯一方法是在编辑器中选择图像时观察编辑器是否按下了删除或退格键。

所以在你的tinymce.init＆＃34;设置＆＃34;功能：

ed.on('KeyDown', function (e) {

    if ((e.keyCode == 8 || e.keyCode == 46) && editor.selection) { // delete & backspace keys

        var selectedNode = editor.selection.getNode(); // get the selected node (element) in the editor

        if (selectedNode && selectedNode.nodeName == 'IMG') {

            MyCallback(selectedNode.src); // A callback that will let me invoke the deletion of the image on the server if appropriate for the image source.
        }
    }
});

我在一个新的插件中设置了这个，然后将回调添加为该插件的一个设置。

Answer 2

此变体已应用于 tinyMCE-5，但它会很有用（我猜）。

从服务器初始标记获取（编辑器的值）；
从图像的标记 ID（正则表达式等）中解析；
保存在图像 ID 的状态数组中；
在向编辑器添加新图像时，我们应该向编辑器添加新 ID 现有状态（使用images_upload_handler）；
在提交数据时，我们应该再次解析编辑器的值并进行比较它与现有状态（实际上是比较两个数组）；
在丢失的 ID 上调用 api.deleteImages。

有些细节这里没有描述，但我认为大体逻辑很清楚。这种变体保证了我们在编辑器中进行所有粘贴/删除/剪切、撤消/重做等操作后（在 5 个中）获得最终图像的列表。此外，我们避免在编辑器中的每个操作上使用侦听器和复杂的逻辑，而是仅在获取/提交时处理所有数据。

Answer 3

我认为我想通过init_instance_callback方法中的MutationObserver来完成这项工作。

init_instance_callback: function (editor) {
    //console.log("tinymce " + editor.id + " init finished.");

    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

    var observer = new MutationObserver(function (mutations, instance) {
        var addedImages = new Array();
        $.each(mutations, function (index, mutationRecord) {
            for (var i = 0; i < mutationRecord.addedNodes.length; i++) {
                var currentNode = mutationRecord.addedNodes[i];
                if (currentNode.nodeName == 'IMG' && currentNode.className != "mce-clonedresizable") {
                    if (addedImages.indexOf(currentNode.src) >= 0) continue;

                    addedImages.push(currentNode.getAttribute("src"));
                    continue;
                }

                var imgs = $(currentNode).find('img');
                for (var j = 0; j < imgs.length; j++) {
                    if (addedImages.indexOf(imgs[j].src) >= 0) continue;

                    addedImages.push(imgs[j].getAttribute("src"));
                }
            }
        });

        var removedImages = new Array();
        $.each(mutations, function (index, mutationRecord) {
            for (var i = 0; i < mutationRecord.removedNodes.length; i++) {
                var currentNode = mutationRecord.removedNodes[i];
                if (currentNode.nodeName == 'IMG' && currentNode.className != "mce-clonedresizable") {
                    if (removedImages.indexOf(currentNode.src) >= 0) continue;

                    removedImages.push(currentNode.getAttribute("src"));
                    continue;
                }

                var imgs = $(currentNode).find('img');
                for (var j = 0; j < imgs.length; j++) {
                    if (removedImages.indexOf(imgs[j].src) >= 0) continue;

                    removedImages.push(imgs[j].getAttribute("src"));
                }
            }
        });

        for (var i = 0; i < removedImages.length; i++) {
            var imageSrc = removedImages[i];
            if (addedImages.indexOf(imageSrc) >= 0) continue;

            if (confirm("delete image from server?\n" + imageSrc)) {
                //delete image from server.
            }
        };
    });
    
    observer.observe(editor.getBody(), {
        childList: true,
        subtree: true
    });
}

tinymce获取删除图像的详细信息

3 个答案: