Search code examples
facebooktwittertinymcetagging

Twitter/Facebook-like User Tagging In A Rich Textbox/TinyMCE


I'm looking for a little advice as to how to go about this one.

I've got an ASP.NET MVC 3 application written in C# with a form that contains a TinyMCE textbox as its rich text editor.

I've been asked to see if it is possible to add user tagging into the form via the textbox much like Facebook/Twitter with @user and an autocomplete.

I've got a reasonable idea of how I'm going to go about getting the data, but I'm not certain if it's even possible to add the functionality to TinyMCE (if that's where it needs adding).

In short, I'm just after a way of a user being able to start typing @user and have the autocomplete dropdown come up much like on Facebook. Though the piece of the puzzle I'm missing is how to implement it. I've got a rough idea of how it will be pieced together overall, just not how to get it to work within the TinyMCE box or have it start working when @ is typed (when not part of an e-mail address too).

Any suggestions?


Solution

  • Twitter has made available their own auto-linking engine, take a look: https://github.com/twitter/twitter-text-js

    It is as simple as

    // basic extraction
    var usernames = twttr.txt.extract_mentioned_screen_names("Mentioning @twitter and @jack")
    // usernames == ["twitter", "jack"]