Skip to content

Is it possible to pre-populate a text field with mentions? #47

cmer opened this Issue Jul 13, 2012 · 6 comments

4 participants

cmer commented Jul 13, 2012

AFAIK this is not possible out of the box, but how should I proceed if I want to pre-populate a text field that contains mentions. The highlighting and the mentions should be preserved.


This is actually an extremely important feature - in order to use the plugin as an editor you need to be able to set the marked up initial text



I'm not much of a JavaScript coder, but I stumbled on this while looking for something similar. I've hacked this together:

        update: function() {
            var messageText = getInputBoxValue();
            // Strip codes
            // add each mention to mentionsCollection
            // And update

            var mentionText = utils.htmlEncode(getInputBoxValue());
            var re = /@\[(.*?)\]\((.*?):(.*?)\)+/g; // Searches through @[value](type:id)

            var match;
            var newMentionText = mentionText;
            while ((match = re.exec(mentionText)) != null) {    // Find all matches in a string
                newMentionText = newMentionText.replace(match[0],match[1]);
                mentionsCollection.push({   // Btw: match[0] is the complete match
                    'id': match[3],
                    'type': match[2],
                    'value': match[1]

Put it somewhere in the public methods of the javascript file. In your own code, you should call $('#name_of_your_textarea').mentionsInput("update");

Mind you that:

  • This only works with the standard templates for the mentions data (i.e. @[value](type:id)). If you have defined a seperate template, you should rework the regex. My JS knowledge is too limited to be able to translate the template to a regex
  • I've cobbled this together in about half an hour; don't shoot me if it doesn't work :/

(Both reasons are why I didn't fork and did a pull request: the above is far from tested and isn't ready for production due to the hardcoded template translation).


Thanks mr. LaundroMat :-)

Also I had to write a different version of getInputBoxValue() - couldn't get jQuery textarea.val() to work:

function getInputBoxValue() {
  return $.trim(elmInputBox.val());

function getInputBoxValueRaw() {
  var childNodes = domInput.childNodes;
  if (childNodes.length > 0)
    return $.trim(childNodes[0].nodeValue);
    return "";

Doesn't work in IE, this was what I meant:

function getInputBoxValueRaw() {
  return $.trim(domInput.defaultValue);

(Works in IE9, FF14 & CHR21)

@therabidbanana therabidbanana added a commit to dtime/jquery-mentions-input that referenced this issue Sep 17, 2012
@therabidbanana therabidbanana Allow prepopulated values to close #47. 66dbb26

This is already possible with "defaultValue" parameter (although ( still have issues with it).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.