TinyMCE如何在删除图片时获取图片详细信息

Question

TinyMCE如何在删除图片时获取图片详细信息

4

我创建了一个插件来处理tinymce的图像上传，一切都正常工作。我想做的是，如果用户删除了图片，就能够从我的服务器上删除该图片，以免出现大量的孤立文件。

我已经能够使用tinymce初始化设置部分监听nodechange事件。

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

这给了我一个事件，我可以在控制台中看到它，但我找不到从事件中获取的任何内容，告诉我图片已被删除，以便我可以从服务器上删除该图片。我已经为此创建了一个演示，您可以在这里查看。

如果您加载控制台并删除图像，您将明白我的意思。我是否缺少事件的某些属性或方法？

提前致谢。

- JaChNo

3个回答

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

- happyexplorer

完全适用于我。谢谢。 - pradipta paul

2

这种变体已应用于tinyMCE-5，但我认为它会很有用。

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

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

- Michael

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JohnB · Accepted Answer

我也想做同样的事情，但是在经过大量的互联网搜索和调试后，我发现唯一实现这一目标的方法是在编辑器中选择图像时观察删除键或退格键是否被按下。

因此，在你的tinymce.init "setup"函数中：

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

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