Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Under pressure; AtMentions

Joe Robinson

June 23rd, 2021

Written by

Joe Robinson

Category

Product Management

Not everything is created equal… 

This series – under pressure – tests core features, premium features, and even integrations across the popular editors on the market. The aim is to see who's efforts work out better (depending on your use case) and if they deliver what’s been promised.

Next, we’re looking at a vital plugin for communication – Mentions.

What are AtMentions?

AtMentions are a fast way to communicate over documents. They are also called ‘@mentions’ because they include the ‘at’ symbol as trigger characters. When you type the trigger character, it’s a flag to let the rich text editor know to load up a list of usernames or user ids. You can then select one of the names. AtMentions will then add that name into the text.

After you mention a specific person, the rich text editor interacts with a database of users to send a notification to the specific, mentioned person. The person can then go and check on what they have been tagged in. 

That’s just one example of AtMentions at work, but across the different use cases, their main purpose is communication because it’s useful to let others know that you need their attention on something written in your application’s rich text editor.

How we compared AtMentions plugins

We examined four main features of AtMentions across several rich text editors available:

AtMentions feature

TinyMCE

CK Editor 5

Froala

Quill

Slate

“@” trigger character

Set a User ID

Customize information

On hover information

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.

Under pressure
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Product Management

    Under Pressure; React integration

    by Joe Robinson in Product Management
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing