In one of our main projects we are using a custom TinyMCE plugin to allow the users to attach files to an email that is sent from our system. The plugin pops up a modal and asks the user for information then inserts the entered data into the editor at the cursor. This works perfectly well in most cases, except for IE11 where it inserts the text at the beginning of the editor.
We found a Stack Overflow post (TinyMCE – Inserting content at cursor position in IE doesn’t work) that gave the basics on how to fix it. Here is what I ended up doing.
Create the plugin with the bookmark code:
tinymce.PluginManager.add('customattachment', function (editor, url) { var self = this; // ie11 does not retain the current cursor position when the attachment popup loads. We need to retain the current position // and then restore it in the "InlineAttachment" function using the self.restoreBookmark() defined in this file. var bookmark; editor.addButton('insertcustomattachment', { title: "Insert Attachment", type: 'button', icon: 'attachment-ico', onclick: function (e) { //save bookmark bookmark = tinyMCE.activeEditor.selection.getBookmark(); $.fancybox({ content: "<iframe class=\"naked customattachment\" src=\"/attachment/upload/InlineAttachment/\" scrolling=\"no\" style=\"border:none; width:500px; min-height:250px; margin:15px;\"></iframe>", scrolling: 'no', padding: 0, margin: 0, onClosed: function () { } }); // prevent bootstrap from hijacking the click (on Website | Home full-width pages) $('.fancybox-inner').find('iframe').on('focusin', function (evt) { var $ipt = $($(evt.target)[0].contentWindow.document).find('.custom-attachment-title').closest('form'); if ($ipt.length) { evt.stopImmediatePropagation(); } }); }, }); self.restoreBookmark = function () { //restore bookmark return tinyMCE.activeEditor.selection.moveToBookmark(bookmark); } });
Call the code to insert the attachment after the modal is closed:
// Used in _komodal_tinymce for customattachment function InsertInlineAttachment(item) { tinyMCE.activeEditor.plugins["customattachment"].restoreBookmark(); tinyMCE.activeEditor.execCommand('mceInsertContent', false, item.replace(/"/g, "'")); $.fancybox.close(); }