javascript - tinymce get image details on deletion - Stack Overflow

admin管理员组

文章数量:1341413

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

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

• javascript
• jquery
• tinymce-4

Share Improve this question Follow asked May 12, 2014 at 10:25 JaChNoJaChNo 8922 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

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

This variant was applied to tinyMCE-5, however it would be useful (I guess).

1. getting from server initial markup (value for editor);
2. parsing from the markup IDs of the images (regexp etc.);
3. saving in state array of the images IDs;
4. on adding new images to the editor we should add new IDs to the existing state (use images_upload_handler);
5. on submitting data we should parse editor's value again and pare it with existing state (in fact pare the two arrays);
6. call api.deleteImages on missing IDs.

Some details are not described here, but I think the general logic is clear. Such variant guarantees that we get (in 5) list of the final images after all paste/delete/cut, undo/redo etc. in editor. Also we avoid listeners and plex logic on every action in editor but handle all data only on get/submit.

本文标签： javascripttinymce get image details on deletionStack Overflow