tinymce - how to prevent resizable feature on inserted html element

Question

Try to test this in the fiddle page I put up.

http://fiddle.tinymce.com/GBdaab/1

In IE8 or less, the inserted html element becomes resizable. Funny thing is that modern browsers don't allow this to happen.

When you insert an html element, there should be a reason for such a behaviour. I mean, you don't expect any change or resize on the element.

But it happens in IE8.

And this is actually not related to the functionality of the editor, when you click on the table, the cursor changes to 'move' shape. and whereever you mouseover, it never changes to 'default' status.

As far as I know, displaying such a cursor is for notifying users that the target element is movable. But it only shows 'move' shape, even when the table isn't draggable. I don't want this feature as well.

Is there any option for this? or is it a bug? or is it related to css or table plugin?

Steps to reproduce:

1. be sure to test this in IE8 or less
2. try to click on the red div box.
3. then handles appear.
4. and you can resize the div box.

Expected result:

No resizing handlers on the box is allowed if stopPropagation, preventDefault, or returnValue = false code are set in the code...

Actual result:

Ended up enabling and displaying resizing handlers.

Answer 1

Unfortunally, I can't test this in any IE8 - or worse, but try adding this: (Object_resizing : false (in tinymce 4) wont let you resize anything thought - and the handlers wont show up at all)

tinymce.init({
    selector: "textarea",
    object_resizing : false, /* THIS might do the trick */
    plugins: […

Answer 2

Okay, It's not a complete solution for this issue, but at least I found out a way to do this.

It's contenteditable attribute that does the job. Giving contentEditable=false on the nested body can successfully stop the resize-handlers from appearing in Internet Explorer 8.

Avoiding the handlers was only thing I was looking for when a user mousedowns on the inserted element, I mean the red block you could see in the fiddle.

So, I had no choice but to weave some script to solve this problem.

var redBlock = $('#div.red'); // inserted HTML on tinymce
var parentElement = $('iframe').contents().find('body'); //tinymce body

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

With this script, when your mouse hovers on the inserted element, the body becomes non-editable because IE8 starts considering the elements in the non-editable body as impossible things to edit.

So, no handlers appear as this result. This is the only way I could find so far.

• No tinymce option works.
• No other HTML attributes affect the IE8's own resizing handler.
• No other CSS attributes affect it as well.

Correct this answer If there's something I'm missing. But I'm quite sure that this is the only way for this.