Issues with TinyMCE resizable content in IE8

Question

Update: After posting on the TinyMCE forum (something I had to do before offering generosity) the primary problem can be resolved, but I'm still very open to anything regarding other issues related to disabling resizable behavior (numbers 2 and 3 at the end of the message).

---

I have a problem saving content with TinyMCE in IE8 (not in other versions). In IE, some elements in the editor have handles in each corner and draggable “borders”, and when you focus 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 contents. I have to click in another area of ​​the editor so that all borders disappear, and then submit the form.

I am using jQuery TinyMCE 3.4.6 package, I do not get this behavior in other browsers.

---

Update:

I narrowed down the cause of the problem a bit and found a few things:

• The problem arises with or without jQuery assembly and does not depend on which tinymce plugins are used.
• A thicker “border” appears only if there is (min-) height / width applied to the element, either declared inline or external CSS.

• Using IETester , I got errors that require 'length' is null or not an object when focus from the active element is lost; those. when you click anywhere outside the TinyMCE editor.

  

  I did not see this error in a genuine installation of IE8 (something that I can’t get right now), however this makes some sense, given the problem and workaround outlined above. I had to send the application twice and reject the warnings in order to receive the form for publication in IETester.

• These boundaries and descriptors will actually go beyond the / iframe editor:

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

 <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 demo in IE8
• Click on an existing paragraph, a small 1px border will appear, and you will not be able to edit the text.
• Click the item again, a thick frame will now appear, and the text can be edited.
• Enter a few characters, then click the submit button. An update will not be sent with $_POST data. If you want to click another area inside the editor, removing the thick border, the data will be sent normally.

---

Questions / problems:

• Important: How can I get a form for publishing edited text without requiring a workaround from the user?

  Update:. This seems to be allowed in a recent commit from TinyMCE lead developer. I still could not test the actual installation of IE8, but it worked and silenced the errors in IETester.

• Less important: Is there a way to prevent or remove handles and draggable edges completely? I assume that this is a problem with the implementation of IE contentEditable and not so much TinyMCE, and cannot even be the cause of the problem.

• Extra . How can I prevent these descriptors from being distributed outside the editor?

Answer 1

okay, this is a strange IE8 bug. I found a workaround, but the tinymce team should fix this.

I found out that before submitting the form, you can set the contents of the text area to the contents of the text area ... It sounds strange, but calling .html() raises the tinymce event, which returns the correct html.

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

Answer 2

Question 2 is related to the implementation of IE contentEditable, this is a ticket on your site for connection, requiring fixing it https://connect.microsoft.com/IE/feedback/details/576043/paragraphs-with-haslayout-behave-like-a-block -inside-contenteditable (login required)

I do not know any solutions for Question 3, except to wait for a new IE. In the latest IE10 under Windows8, they claim to have 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 resize handles always. Well, there is a solution and avoid using any style during editing, which forces the hasLayout internal flag for IE

Answer 3

Apparently, you cannot fix the second problem.

Here are the articles that explain this quite well: you cannot delete them unless you delete the property that makes them appear. http://www.satzansatz.de/cssd/onhavinglayout.html (search for the word "delete")

You can still improve a bit by using this in a container (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 does not have to be a div) Onmousedown will allow you to click only once to get to a state where you can write. Onresizestart will prevent resizing.

Answer 4

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