1

Topic: TinyMCE not saving content with draggable handles in IE8

This is a cross-post from here: http://stackoverflow.com/questions/7758 … ent-in-ie8. I'm desperate to solve this issue, and thought it should be brought to attention in case this is undocumented or affecting other users. Please let me know if this is worth filing a bug report, or if I actually need to open an official support ticket.

__________________________________________________

I am having trouble saving content with TinyMCE in IE8 (not worried about previous 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:

http://i.stack.imgur.com/rPKWm.png

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.

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.

    http://i.stack.imgur.com/8CCno.png

    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:

http://i.stack.imgur.com/6Rwx4.png

I created a live bare-bones demo here: http://umpire.biz/test/, 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:

    Open the demo in IE8
    Click on the existing paragraph, a small 1px border should appear, and you should be unable to edit the text.
    Click on the element again, now the thick border appears and text can be edited.
    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:

    Important: How can I get the form to post the edited text without requiring a workaround from the user?
    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.
    Extra: How can I prevent these handles from extending outside the editor?

I'd like to continue to be able to use min-height etc., but if all else fails I guess I will be forced to remove it from the site's primary stylesheet (which is loaded into TinyMCE) because this is causing problems for our editors.

If anyone has any clues on how else to approach this issue, that would be a great help.

2

Re: TinyMCE not saving content with draggable handles in IE8

Ok, pushed a fix for this issue. However IE becomes very buggy when it has contents that is resizable like this. It's like each resizable region is it's own document. I don't think there is anyway to disable the resize handles on these odd items. sad

Best regards,
Spocke - Main developer of TinyMCE

3

Re: TinyMCE not saving content with draggable handles in IE8

File a bug report if it's still an issue with the latest GitHub version. In fact it would be nice to have a bug report anyway so we can refer to it.

Best regards,
Spocke - Main developer of TinyMCE

4

Re: TinyMCE not saving content with draggable handles in IE8

The patch seemed to work perfectly in IETester, I'm trying to get to a true IE8 install to verify. Strange that this didn't seem to be an issue in IE6 7 or 9.

Thanks for looking at this and even more so for addressing it so promptly, I will submit a bug report for reference this afternoon when I get a break from work.