删除/隐藏TinyMCE调整图像元素上的拖动控制柄

Question

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

例如，查看图形图像周围的方块：

他们不会出现在任何其他浏览器中（chrome，safari，firefox）。

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

谢谢！

---

我尝试但没有工作的事情：

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

将CSS resize属性设置为none：* { 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?