TinyMCE issues with resizable content in IE8

Question

Update: After posting on the TinyMCE forum (something I should have done before offering the bounty) the primary issue may be solved, but I'm still very much open to anything regarding the other issues of how to disable the resizable behavior (number 2 and 3 at the end of the post).

---

I am having trouble saving content with TinyMCE in IE8 (not other versions). In IE, certain elements in the editor have handles in each corner and draggable "borders", and when you focus in to start editing, a striped border may appear:

Problem:

If I submit the form while the thick border is still visible (state 3 in the image), the form will not save the content. I have to click into another area of the editor to make all the borders disappear, and then submit the form.

I'm Using the TinyMCE 3.4.6 jQuery package, I don't get this behavior in other browsers.

---

Update:

I've narrowed down the cause of the issue quite a bit and found a few things:

• The problem occurs with or without the jQuery build, and does not depend on which tinymce plugins are in use.
• The thicker "border" only seems to appear when there is a (min-)height/width applied to the element, either declared inline or from external CSS.

• Using IETester, I was getting errors that claim 'length' is null or not an object when focus from the active element is lost; i.e. when you click anywhere outside the TinyMCE editor.

  

  I did not see this error in a true IE8 install (something I currently can not access), however: this makes sense somewhat, considering the problem and workaround stated above. I had to hit submit twice and dismiss the warnings to get the form to post in IETester.

• These borders and handles will actually extend outside of the editor/iframe:

I created a live bare-bones demo, here is the content of it:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
    $(function() {
        $('textarea.tinymce').tinymce({
            script_url : 'tiny_mce/tiny_mce.js',
            content_css : 'test.css'
        });
    });
</script>

<form action="" method="post">
<textarea class="tinymce" name="content">&lt;p&gt;Testing&lt;/p&gt;</textarea>
<button type="submit">Submit</button>
</form>

/* Content of test.css */
p {
    min-height: 24px; /* this line makes the handles appear */
    background-color: #f00;
    color: #fff;
}

How to reproduce:

1. Open the demo in IE8
2. Click on the existing paragraph, a small 1px border should appear, and you should be unable to edit the text.
3. Click on the element again, now the thick border appears and text can be edited.
4. Type a few characters, then click the submit button. The update will not be sent with the $_POST data. If you were to click another area inside the editor, removing the thick border, the data would be sent normally.

---

Questions/Issues:

1. Important: How can I get the form to post the edited text without requiring a workaround from the user?

   Update: This seems to be resolved in a recent commit from the TinyMCE lead developer. I still have been unable to test on a real IE8 install, but this worked and silenced the errors in IETester.

2. Less important: Is there any way to prevent or remove the handles and draggable edges completely? I'm guessing this is a concern with IE's implementation of contentEditable and not so much TinyMCE, and may not even be the cause of the problem.

3. Extra: How can I prevent these handles from extending outside the editor?

Answer 1

Question 2 is due to the IE implementation of contentEditable, This is a ticket at their connect site requesting to fix it https://connect.microsoft.com/IE/feedback/details/576043/paragraphs-with-haslayout-behave-like-a-block-inside-contenteditable (login required)

I don't know of any solution for Question 3, except to wait for a new IE. In the latest IE10 under windows8 they claim that it's fixed https://connect.microsoft.com/IE/feedback/details/576040/resizing-handles-in-contenteditable-elements-are-placed-over-any-other-element (login required), but their solution is to hide the resizing handles always. Well, there's a solution and it's to avoid using any style while you're editing that forces the internal hasLayout flag for IE

Answer 2

alright this is a weird IE8 bug. I've found a workaround but still the tinymce team should fix this.

I've found out that before submitting the form you could set the content of the textarea to the content of the textarea... Sounds weird but calling the .html() triggers a tinymce event that returns the correct html.

$("button").click(function() { 
    $("textarea").html($("textarea").html());
});

Answer 3

There is apparently no way you can fix the second issue.

Here is an articles that explains it quite well: You can't remove those unless you remove the property that made them appear. http://www.satzansatz.de/cssd/onhavinglayout.html (search for the word "remove")

You can still improve a bit by using this on the container (the element with contenteditable):

function fixIE( editableContainer ) {
    editableContainer.onmousedown = function ( e ) {
        e = e || event;
        ( e.target || e.srcElement ).focus( );
    };
    editableContainer.onresizestart = function ( e ) {
        e = e || event;
        if ( e.stopPropagation ) {
            e.stopPropagation( );
        }
        e.cancelBubble = true;
        if ( e.preventDefault ) {
            e.preventDefault( );
        }
        e.returnValue = false;
        return false;
    };
}

(Your element doesn't have to be a div) The onmousedown will allow you to click only once to get to the state where you can write. The onresizestart will prevent resizing.

Answer 4

if you give it hasLayout, it should work. try zoom:1;