internet-explorer - 删除/隐藏图像元素上的 TinyMCE 调整大小拖动 handle

Question

我正在使用 TinyMCE。在 IE9 中，当用户添加图像时，他们会在图像周围看到调整大小的 handle 。

例如，看图形图像周围的方 block :

它们不会出现在任何其他浏览器(chrome、safari、firefox)中。

如何在 IE 中删除/隐藏调整大小的拖动 handle ？

谢谢!

---

我尝试过但没有奏效的事情:

在选项中禁用对象调整大小:tinyMCE.init({object_resizing:false})

将 CSS 调整大小属性设置为无:* { resize: none }

Answer 1

我昨天遇到了这个问题，它在 Chrome/FF 上运行良好，但在 IE 11/10/9/8 中我看到了可调整大小的图标，与您的情况相同。

我有一个带有一些类名的 div，所以我通过以下方式解决了它:

var mydiv = $('#div.classname');
var parentElement = $('iframe').contents().find('body');

mydiv.mouseenter(function(e) {
     parentElement.Contents.attr('contentEditable', false);
}).mouseout(function(e) {
     parentElement.Contents.attr('contentEditable', true);
});

基本上，如果您不想看到可调整大小的选项，则必须禁用 contenteditable 属性。因此，只需使用 jQuery 选择图像或您想要的任何其他元素，然后将此属性设置为 false。

既然你有一张你可以使用的图片

var ifr_body = $('iframe').contents().find('body');    
$('#youreditorid').contents().find('img.classnameofimage').hover(
    function() {
        ifr_body.attr('contenteditable', 'false');
    },  function() {
        ifr_body.attr('contenteditable', 'true');
    }
);

我必须在 hover 上执行此操作，您的情况可能会有所不同，请记住您必须使 contenteditable false，仅此而已.选择您自己的操作/选择器。

另见:TinyMCE: Disable 'resizable' function for specific div?