CODEWITHSUNDEEP
htmltinymceinternet-explorer-11tinymce-pluginstinymce-3
Shannon Fluellen
Shannon Fluellen

Reputation: 83

TinyMCE paragraph element unfocusable in Internet Explorer 11

I'm having a problem with Internet Explorer 11 not allowing an empty paragraph element to be focused in TinyMCE 3. I have a preceding paragraph element with various child nodes such as image and span elements that I have marked as non-editable with the core NonEditable TinyMCE plugin. They are inserted via the execCommand('mceInsertContent') function. Because of it being non-editable, I've had to insert a paragraph element immediately following the non-editable block and want the cursor to focus there which works. However, if I click into the non-editable elements after insertion, I am unable to then click back into the paragraph element below. It becomes completely non-focusable despite certainly being in the DOM since I can see it in the developer tools DOM explorer. I believe there is some set of interactions happening that's causing the following paragraph element to become unfocusable specifically after clicking into the non-editable elements.

I've tried every focus/selection manipulation I could think of and nothing worked. The only thing that seems to work (but is less than ideal) is to put a blank space in the paragraph following the non-editable paragraph. I'm not sure this is an acceptable solution though.

Here is the HTML I'm working with

<p class="mceNonEditable">
  <a href="www.google.com">
    <span>
      <img></img>
    </span>
    <span>
      Some Text
    </span>
  </a>
</p>
<p></p>  <---- can't focus into this element after clicking into preceding paragraph

Internet explorer seems to be the only browser I've ran into this issue with. Chrome and Safari allow focus on that paragraph element

Upvotes: 0

Views: 92

Answers (0)

Related Questions