tinymce get image details on deletion

问题:

I have created a plugin to handle image uploads for tinymce. THis is all working fine. What I want to be able to do is remove the image from my server if it is deleted by the user so that I don't end up with gigs of orphanged files.

I have been able to listen for the nodechange envent using setup part of the tinymce init

<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>

this gives me an event which I can see in the console, but I can't find a way of getting something from the event that tells me a img removal have been performed, so that i can delete the image from the server.

I have create a fiddle for this here HERE

if you load up your console and delete the image you will see what I mean. is there some property or method of the event that I am missing?

Thanks in Advance

回答1:

I was trying to do the same thing, but after much internet trawling & debugging the only way I could see to achieve this was to watch the editor for the delete or backspace keys being pushed while an image was selected in the editor.

So within your tinymce.init "setup" function:

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.
        }
    }
});

I set this up within a new plugin, then added the callback as one of the settings of that plugin.

回答2:

In my opinion, I would like to do this job by using MutationObserver within init_instance_callback method.

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
    });
}