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

Open
cmer opened this Issue Jul 13, 2012 · 6 comments

Comments

Projects
None yet
4 participants
@cmer

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.

@SteelBRS

This comment has been minimized.

Show comment
Hide comment

+1

@SteelBRS

This comment has been minimized.

Show comment
Hide comment
@SteelBRS

SteelBRS Jul 24, 2012

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

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

@LaundroMat

This comment has been minimized.

Show comment
Hide comment
@LaundroMat

LaundroMat Aug 20, 2012

Hi,

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
                console.log(match);
                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]
                });
            }
            elmInputBox.val(newMentionText);
            updateValues();
        },

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).

Hi,

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
                console.log(match);
                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]
                });
            }
            elmInputBox.val(newMentionText);
            updateValues();
        },

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).

@SteelBRS

This comment has been minimized.

Show comment
Hide comment
@SteelBRS

SteelBRS Aug 21, 2012

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);
  else
    return "";
}

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);
  else
    return "";
}
@SteelBRS

This comment has been minimized.

Show comment
Hide comment
@SteelBRS

SteelBRS Aug 22, 2012

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

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

(Works in IE9, FF14 & CHR21)

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

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

(Works in IE9, FF14 & CHR21)

therabidbanana added a commit to dtime/jquery-mentions-input that referenced this issue Sep 17, 2012

@lysender

This comment has been minimized.

Show comment
Hide comment
@lysender

lysender Jun 16, 2015

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

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