#TinyMCE: IE11 Insert Content

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();
  }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s