AtMentions and mentions: Under pressure

The five main rich text editors all provide “@” trigger characters – that’s the core feature of AtMentions. Only TinyMCE, CK Editor 5, and Slate (if you can configure it) can show a unique username or id for display. Otherwise, the AtMentions feature only shows a list of names. Customization is only available in TinyMCE, CK Editor, and potentially Slate (if you can develop the solution yourself).

Why include hover effects?

We believe hover represents a useful addition to AtMentions. It delivers a bit more detail about a person after you hit the trigger “@” character. By hovering your mouse cursor over the names that appear on the list, some more information pops up in a small window. The information also pops up as you navigate up and down the list with keyboard arrow keys.

You can also use hover effects to keep the list of displayed users short, while extra information is hidden until you need it.

Hover effects are also useful for user experience. After you add a name to the content in your rich text editor, being able to hover over the Mentioned person’s name in text and see more detailed information can be a useful reminder of who you are tagging and why. Especially if you have users in your organization with the same names.

AtMention feature maintenance

It’s worth looking closely at how AtMentions features are delivered and maintained. Froala, Quill, and Slate deliver AtMentions through separate projects. Community projects are dotted with features like showing a user id with a trigger character, or potentially showing a user’s name. That’s the limit of the features available, as shown in the earlier table.  

TinyMCE and CK Editor manage AtMentions with their own development teams, while CK Editor provides AtMentions as an npm package.

Comparing AtMentions integration

To activate Mention in CK Editor, the first step is to confirm the number of users you need to include. Depending on your use case, a large number of users won’t scale effectively with the default AtMentions setup. CK Editor recommends setting up a callback for a large set of people in your organization.

This can be a challenge to get started since downloading the npm package and setting up the AtMentions requires JavaScript knowledge (like understanding callbacks for instance). 

However, integrating TinyMCE AtMentions into your web application involves using tinymce.init and the “mentions” plugin: 

<script>
tinymce.init({
    selector: "textarea",
    plugins: [
           "mentions"
   ],
 });
</script>

<form method="post" action="dump.php">
  <textarea name="content"></textarea>
</form>

You’ll need to set up an array that contains your user’s names and ids to finish testing out the AtMentions plugin. This can be as straightforward as a variable called “users” with a comma-separated list of names in quote marks. You will also need to use the map and filter JavaScript functions to search through and filter the list when a user presses the trigger character. An example is available in our documentation.

In production, you’ll need a link to a server holding your organization’s staff list in some storage format. With a flexible, Custom plan, we can configure and integrate AtMentions into your web application. A Custom plan also includes all the 14+ premium plugins available on The Cloud Professional plan, and either Tiny Cloud or Self-hosted options.

If you’re not already using TinyMCE, consider integrating it with your applications. It’s a vital communications component, one that can improve your user experience with hover features, allows for flexible customization, and is comparably easier to integrate than other rich text editors.

Contact us for more assistance or information about AtMentions, or how to get TinyMCE integrated with your applications for the best rich text editing experience.