tinymce получить информацию об изображении при удалении

Я пытался сделать то же самое, но после долгих поисков и отладки в Интернете единственный способ, которым я смог добиться этого, - это наблюдать за тем, как в редакторе нажимаются клавиши удаления или возврата, когда изображение было выбрано в редакторе.

Итак, в вашей функции «настройки» tinymce.init:

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

Я настроил это в новом плагине, а затем добавил обратный вызов в качестве одной из настроек этого плагина.

Этот вариант был применен к tinyMCE-5, однако он был бы полезен (я думаю).

1. получение с сервера начальной разметки (значение для редактора);
2. парсинг по идентификаторам разметки изображений (regexp и т.д.);
3. сохранение в массиве состояний идентификаторов изображений;
4. при добавлении новых изображений в редактор мы должны добавить новые идентификаторы в существующее состояние (используйте images_upload_handler);
5. при отправке данных мы должны снова разобрать значение редактора и сравнить его с существующим состоянием (фактически сравнить два массива);
6. вызовите api.deleteImages для отсутствующих идентификаторов.

Некоторые детали здесь не описаны, но думаю общая логика понятна. Такой вариант гарантирует, что мы получим (в 5) список окончательных изображений после всех операций вставки/удаления/вырезания, отмены/восстановления и т.д. в редакторе. Также мы избегаем слушателей и сложной логики для каждого действия в редакторе, а обрабатываем все данные только при получении/отправке.

На мой взгляд, я хотел бы выполнить эту работу, используя MutationObserver в методе init_instance_callback.

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