Databases
StackOverflow2013
Postsdbo
POTinyMCE issues with resizable content in IE8
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTinyMCE issues with resizable content in IE8
    primarykey
    data
    text
    <p><strong>Update:</strong> After <a href="http://www.tinymce.com/forum/viewtopic.php?pid=95659#p95659" rel="nofollow noreferrer">posting on the TinyMCE forum</a> (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).</p> <hr> <p>I am having trouble saving content with TinyMCE in <strong>IE8</strong> (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:</p> <p><img src="https://i.stack.imgur.com/rPKWm.png" alt="enter image description here"></p> <h3>Problem:</h3> <p>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 <em>then</em> submit the form.</p> <p>I'm Using the TinyMCE 3.4.6 jQuery package, I don't get this behavior in other browsers.</p> <hr> <h3>Update:</h3> <p>I've narrowed down the cause of the issue quite a bit and found a few things:</p> <ul> <li>The problem occurs with or without the jQuery build, and does not depend on which tinymce plugins are in use.</li> <li>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.</li> <li><p>Using <a href="http://www.my-debugbar.com/wiki/IETester/HomePage" rel="nofollow noreferrer">IETester</a>, I was getting errors that claim <code>'length' is null or not an object</code> when focus from the active element is lost; i.e. when you click anywhere outside the TinyMCE editor.</p> <p><img src="https://i.stack.imgur.com/8CCno.png" alt="enter image description here"></p> <p>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.</p></li> <li>These borders and handles will actually extend <em>outside</em> of the editor/iframe: <img src="https://i.stack.imgur.com/6Rwx4.png" alt="enter image description here"></li> </ul> <p>I created a live <a href="http://umpire.biz/test/" rel="nofollow noreferrer">bare-bones demo</a>, here is the content of it:</p> <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="tiny_mce/jquery.tinymce.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { $('textarea.tinymce').tinymce({ script_url : 'tiny_mce/tiny_mce.js', content_css : 'test.css' }); }); &lt;/script&gt; &lt;form action="" method="post"&gt; &lt;textarea class="tinymce" name="content"&gt;&amp;lt;p&amp;gt;Testing&amp;lt;/p&amp;gt;&lt;/textarea&gt; &lt;button type="submit"&gt;Submit&lt;/button&gt; &lt;/form&gt; /* Content of test.css */ p { min-height: 24px; /* this line makes the handles appear */ background-color: #f00; color: #fff; } </code></pre> <h3>How to reproduce:</h3> <ol> <li>Open the <a href="http://umpire.biz/test/" rel="nofollow noreferrer">demo</a> in IE8</li> <li>Click on the existing paragraph, a small 1px border should appear, and you should be unable to edit the text.</li> <li>Click on the element again, now the thick border appears and text can be edited.</li> <li>Type a few characters, then click the submit button. The update will not be sent with the <code>$_POST</code> data. If you were to click another area inside the editor, removing the thick border, the data <em>would</em> be sent normally.</li> </ol> <hr> <h3>Questions/Issues:</h3> <ol> <li><p><strike><strong>Important:</strong> How can I get the form to post the edited text without requiring a workaround from the user?</strike></p> <p><strong>Update:</strong> This seems to be resolved in a <a href="https://github.com/tinymce/tinymce/commit/32365627f0098035e5a9648e2be3dfeaf094a0df" rel="nofollow noreferrer">recent commit</a> 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.</p></li> <li><p><strong>Less important:</strong> 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 <code>contentEditable</code> and not so much TinyMCE, and may not even be the cause of the problem.</p></li> <li><strong>Extra</strong>: How can I prevent these handles from extending outside the editor?</li> </ol>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USWesley Murch
    1. USWesley Murch
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POTinyMCE issues with resizable content in IE8
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POTinyMCE issues with resizable content in IE8
      1. USWesley Murch
      1. VTBountyStart
    3. VO
      singulars
      1. POTinyMCE issues with resizable content in IE8
      1. This table or related slice is empty.
      1. VTUpMod
    1. COyou shoud ask this in the tinymce forum: http://www.tinymce.com/forum/
      singulars
      1. POTinyMCE issues with resizable content in IE8
      1. USThariama
    2. CO@Thariama: You were one of the folks I hoped would have an answer :) After using SO, it's so difficult to go back to the forums but I will give it a shot. I have a few "Tumbleweed" posts already there.
      singulars
      1. POTinyMCE issues with resizable content in IE8
      1. USWesley Murch
    3. COunfortunately i cannot recall the location of a post/thread with a similar issue to the one you report here - and i am sure there was a solution (i think it was somewhere in the tinymce forum). We use FF mainly, so IE is not my speciality. To get a helpful answer may happen fast, but sometimes it is hard to find an answer to a difficult question there.
      singulars
      1. POTinyMCE issues with resizable content in IE8
      1. USThariama
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload