jquerycontenteditablemedium-editor

medium-editor and pasteHTML keeps cursor within pasted html


Example of what happense

UPDATE added image of steps.

I keep over thinking everything to do with the Medium Editor and I'm towards the end of what I want to achieve, but this last one has me puzzled. I'm using the Medium Button extension to help create a custom button that fires off a function followed by a click. Everything is going awesome until I try to paste some new HTML into the editor. Here's the jQuery click function:

$(document).on('click', 'a.tag_person', function(){

   var name = $(this).text();
   var id = $(this).data('id');

   var link = '<a data-rel="'+id+'">'+name+'</a>';
   editor.pasteHTML(link);    

   $('.tagging_list').remove();
});

So it adds something like this: Sally to the code. That works. What I'm having issues with is the in the editable field, the caret is placed right before the close tag. So when the people keep typing, it just keeps adding text to that mark when I want it to kick out. There's gotta be a way to move the caret outside of the tag.

Anyone have an idea??

THANKS!


Solution

  • I got some sort of a solution. When you paste HTML, put something around it. I'm using tick marks. Sooo:

    var link = '`<a data-id="'+id+'">'+name+'</a>`';
    editor.pasteHTML(link);
    

    When the editor regains focus, it's outside of the tag.

    I'm sure there's a waaaay better way, but this was the best I could come up with.