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:
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.
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: http://umpire.biz/test/, here is the content of it:
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.
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.