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.
