如何在TinyMCE 3.4.6中禁用图片拖拽且阻止浏览器打开图片？

这问题我之前帮人排查过类似的，TinyMCE 3.x版本比较老，paste_block_drop确实只能阻止编辑器粘贴拖拽的内容，但管不了浏览器本身的默认拖拽行为——也就是把图片拖进来时浏览器直接打开它的操作。这里给你个完整的解决方案：

你需要在编辑器初始化时，通过setup钩子给编辑器的内部iframe文档绑定拖拽事件，直接阻止这些事件的默认行为和冒泡，这样既能禁用编辑器的图片拖拽粘贴，又能避免浏览器打开图片。

具体代码配置如下：

tinyMCE.init({
    // 你的其他编辑器配置（比如theme、width、height等）
    paste_block_drop: true, // 保留这个配置，确保编辑器不处理拖拽内容
    setup: function(editor) {
        // 编辑器初始化完成后执行
        editor.onInit.add(function(ed) {
            // 获取编辑器iframe内部的文档对象
            var editorDoc = ed.getDoc();
            
            // 阻止dragenter和dragover的默认行为，让drop事件能被我们捕获
            editorDoc.addEventListener('dragenter', function(e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);
            
            editorDoc.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);
            
            // 核心：阻止drop事件的默认行为，彻底避免浏览器打开拖拽的图片
            editorDoc.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
            }, false);
        });
    }
});

为什么要这么做？ #

• paste_block_drop: true 只是告诉TinyMCE不要将拖拽的图片插入到编辑器中，但浏览器本身的拖拽机制仍然会触发“打开图片”的默认动作。
• 通过绑定dragenter、dragover事件并阻止默认行为，是为了让浏览器认为当前编辑器区域是“可放置”的目标，从而触发drop事件；然后在drop事件里彻底阻止默认行为，就能完全禁用浏览器打开图片的操作。

如果你的页面上还有其他可能触发拖拽的区域，也可以给页面的body添加类似的事件监听，但通常只处理编辑器内部的iframe就足够解决问题了。

内容的提问来源于stack exchange，提问作者amara