Search code examples
tinymcetinymce-plugins

When my TinyMCE plugin inserts a tag into the edit box, typed-in text appears inside that tag instead of outside. How do I avoid this?

I am using the plugin here for TinyMCE mentions so when I type @ it shows JSON results and i can select from the list.

https://github.com/StevenDevooght/tinyMCE-mention

I added this code, which returns the selected value and name in a <span> html tag:

insert: function(item) {
    return '<span class="mention" id="' + item.sequence + '">@' + item.name + '</span>';
},

Problem is, it’s inserting the selected value as expected, but when I continue typing in the textarea, it remains inside the value of the <span> tag.

Once the item has been selected, I want to continue the typing outside of the tag.

Solution

  • This is not exactly a fix, more of a silly workaround:

    insert: function(item) {
    return ('<span class="mention" id="' + item.sequence + '">@'
        + item.name + '</span>&zwnj;');
},

    This will insert a U+200C ZERO WIDTH NON-JOINER code point after the <span> element, which will force the caret to appear outside the element. Any ‘dummy’ character would do; the original library does something similar (with &nbsp;) for what I assume is a similar reason. In fact, &nbsp; might even work better, as at least it is visible to the user, so they will not be surprised by an invisible character being deleted when they hit Backspace.