Feedback shouldn’t slow us down—it should keep things moving. Conversations happen all around the world inside rich text editors between coworkers, students and teachers, content managers, developers, and many others. For every discussion, it’s important that comments are readable, organized, and useful. This is where TinyMCE’s upgraded Comments plugin comes in.
Managing group efforts is easy with features like threaded conversations, comments-only mode, and the ability to view all feedback at once, just to name a few. The Comment Event API provides comment events for your app to listen for and act on in real time, giving you more control on how users collaborate on feedback. Users can even lock comments as read-only to keep their feedback intact.
Embedded mode vs callback mode
Our guide focuses on embedded mode, a simple client-side approach that stores comments directly within your front-end content—no back-end setup or callback configuration required. If you need a more customizable, server-side solution, TinyMCE’s callback mode allows you to connect to your own storage system and configure comment functions like create, edit, and resolve using the Comments Event API.
|
Embedded Mode |
Callback Mode |
|
|
Storage Location |
Stored directly within the content (client-side). |
Managed externally, typically in a database (server-side). |
|
Setup Complexity |
Simple to set up, no backend or external infrastructure required. |
Requires callback functions to handle comment operations like create, edit, and fetch. |
|
Use Case |
Ideal for single-user applications or scenarios where comments don’t need to persist beyond the session. |
Suitable for multi-user applications or scenarios requiring persistent comment storage. |
|
Best For |
Local demos, quick setups, and lightweight use cases. |
Enterprise or large-scale applications with advanced collaboration needs. |
Solving a problem with Comments: Trouble on Olympus
Once upon a time on Mount Olympus, the goddess Athena found herself judging an essay contest on the meaning of wisdom. Each submission from the godly offspring brimmed with creativity, and with more than a few typos. Athena faced a daunting task: providing feedback that was constructive and didn’t waste too much of the goddess’s precious time.
“What could make this faster?” Athena pondered. As the goddess of wisdom, she knew the answer had to be something both powerful and useful. Then it struck her: the school’s learning management system could install the TinyMCE Comments plugin. With that, she could leave inline suggestions and corrections directly on each essay, enabling the young gods to refine their writing.
To solve Athena’s problem, we’ll install the Comments plugin in embedded mode for her, using this guide. After a quick installation, we’ll dive into advanced options like author names and avatars, as well as comment resolution.
Step one: Set up TinyMCE
Before we can add author avatars and names for Athena and her students, we’ll need to get TinyMCE up and running.
To do this, you’ll need three things:
- Basic familiarity with HTML and JavaScript
- A unique, working TinyMCE API key, which you can get for free when you sign up for a 14-day trial of TinyMCE
- Node.js installed on your system to use http-server for local hosting
Create a basic TinyMCE index.html file
Make a new index.html file that will serve as the foundation for our TinyMCE editor. Here’s a basic setup to include in the file that also has an essay on wisdom by our student, Hermes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comments Demo</title>
<!-- Replace 'no-api-key' in the link below with your API key -->
<script src="<a href="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js">https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js</a>"
referrerpolicy="origin"></script>
</head>
<body>
<textarea><h1>Wisdom According to Me</h1>
<p><img src="<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Seated_Hermes_%28detail%29_-_Getty_Villa_-_Outer_Peristyle.jpg/1920px-Seated_Hermes_%28detail%29_-_Getty_Villa_-_Outer_Peristyle.jpg">https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Seated_Hermes_%28detail%29_-_Getty_Villa_-_Outer_Peristyle.jpg/1920px-Seated_Hermes_%28detail%29_-_Getty_Villa_-_Outer_Peristyle.jpg</a>" alt="Winged sandals on Hermes" width="300" height="225"></p>
<p>Wisdom is like a pair of winged sandals – you don’t get it by sitting around on a cloud. Nope, you gotta <em>earn</em> it. Take it from me, Hermes, the most clever and charming god on Mount Olympus. (Okay, except maybe Athena, but she cheats by being born wise).</p>
<p>For example, last week, I told Apollo, "Hey, your chariot could really use a spoiler for better aerodynamicks.” He didn’t listen, and now his sunbeam got stuck behind a raincloud traffic jam. Who’s the wise one now, huh?</p>
<p>Also, wisdom is knowing how to get away with stuff. Like that time I "borrowed" Zeus’s lightning bolt to zap an olive tree just to see what would happen. Sure, there was yelling and a teensy thunderstorm, but everyone agreed that grilled olives are a total game-changer. Do they give me credit for my brilliance? No. Zeus just said, “You’re grounded, Hermes.” He doesn’t <em>get</em> innovation.</p>
<p>In conclusion, wisdom is about quick thinking, probly some mischief, and looking good while doing it. Remember: when life gives you nectar, you sell it to Dionysus for a favor. That’s how you win at wisdom!</p>
<p><em>By Hermes</em></p>
<p><em>(Future owner of Winged Sandals Inc.)</em></p></textarea>
<script>
tinymce.init({
selector: 'textarea',
plugins: 'lists link image table code help wordcount',
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
});
</script>
</body>
</html>👉 Don’t forget: Replace no-api-key with your TinyMCE API key in order to make this HTML work.
Step two: Add the Comments plugin
Next, we’ll add Comments with embedded mode to our TinyMCE configuration:
plugins: 'tinycomments lists link image table code help wordcount',
toolbar: 'addcomment showcomments undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent',
tinycomments_mode: 'embedded',
tinycomments_author: 'athena'
});💡Note: If the tinycomments_author and tinycomments_author_name options are not configured, all users will be assigned the name "ANON".
Step three: Test your new setup
Nice, now let’s make sure Athena can leave comments. With your index.html file ready and the Comments plugin installed and configured, it’s time to look at our app locally. 🎉
In Terminal, navigate to the folder where your file is located, and run:
http - server;
Now, visit http://localhost:8080 in the browser to see our rich text editor in action.
How comments are stored
The comments in Embedded Mode are stored locally. To access this content you can:
- Look in the Source Code HTML to see the comment thread ID
- In the browser’s Console, run the following command to see the comments embedded alongside the content’s HTML:
tinymce.activeEditor.getContent("textarea");
Step four: Adding an author to comments
Now that we’ve set up comments, let’s make sure Hermes will know who’s leaving feedback on his essay. We’ll continue building our demo app with each option.
tinycomments_author
tinycomments_author sets the unique identifier for the author of a comment. It's essential for tracking who made each comment. We’ll make it easy for ourselves in this demo:
tinycomments_author: 'athena',👉 Tip: Ensure each user has a unique tinycomments_author ID to accurately attribute feedback.
tinycomments_author_name
tinycomments_author_name sets the display name of the comment author, so we can be a little more creative with this than we can for tinycomments_author:
tinycomments_author_name: 'Athena, Goddess of Wisdom',tinycomments_author_avatar
To make it even easier to see at a glance who left comments on the content, we can use avatars for each author. The tinycomments_author_avatar option sets the URL for each author's avatar.
Athena will get an image from the Wikimedia Commons free images library, for her avatar:
tinycomments_author_avatar: '<a href="https://upload.wikimedia.org/wikipedia/commons/e/ea/Bust_Athena_Velletri_Glyptothek_Munich_213.jpg">https://upload.wikimedia.org/wikipedia/commons/e/ea/Bust_Athena_Velletri_Glyptothek_Munich_213.jpg</a>',Now when the goddess of wisdom makes a comment, we’ll see her display name and her avatar.
Adding the tinycomments_can_resolve option
The tinycomments_can_resolve option adds a "Resolve Conversation" option in the comment menu for any conversation.
💡Note: Without this option, it’s only possible for users to delete their comments.
To set this up for our demo, we’ll:
1. Change Athena’s author ID into a constant at the top of our <script> block inside the <body>
const currentAuthor = "athena";
2. Add the tinycomments_can_resolve function to our TinyMCE initialization
tinycomments_can_resolve: (req, done, fail) => {
const allowed = req.comments.length > 0 && req.comments[0].author === currentAuthor;
done({ canResolve: allowed || currentAuthor === 'admin_user_id' });
},
Once everything is configured in your index.html file with Athena’s author information and the tinycomments_can_resolve function, your code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comments Demo</title>
<!-- Replace 'no-api-key' in the link below with your API key -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
referrerpolicy="origin"></script>
</head>
<body>
<textarea><h1>Wisdom According to Me</h1>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Seated_Hermes_%28detail%29_-_Getty_Villa_-_Outer_Peristyle.jpg/1920px-Seated_Hermes_%28detail%29_-_Getty_Villa_-_Outer_Peristyle.jpg" alt="Winged sandals on Hermes" width="300" height="225"></p>
<p>Wisdom is like a pair of winged sandals – you don’t get it by sitting around on a cloud. Nope, you gotta <em>earn</em> it. Take it from me, Hermes, the most clever and charming god on Mount Olympus. (Okay, except maybe Athena, but she cheats by being born wise).</p>
<p>For example, last week, I told Apollo, "Hey, your chariot could really use a spoiler for better aerodynamicks.” He didn’t listen, and now his sunbeam got stuck behind a raincloud traffic jam. Who’s the wise one now, huh?</p>
<p>Also, wisdom is knowing how to get away with stuff. Like that time I "borrowed" Zeus’s lightning bolt to zap an olive tree just to see what would happen. Sure, there was yelling and a teensy thunderstorm, but everyone agreed that grilled olives are a total game-changer. Do they give me credit for my brilliance? No. Zeus just said, “You’re grounded, Hermes.” He doesn’t <em>get</em> innovation.</p>
<p>In conclusion, wisdom is about quick thinking, probly some mischief, and looking good while doing it. Remember: when life gives you nectar, you sell it to Dionysus for a favor. That’s how you win at wisdom!</p>
<p><em>By Hermes</em></p>
<p><em>(Future owner of Winged Sandals Inc.)</em></p></textarea>
<script>
const currentAuthor = 'athena'
tinymce.init({
selector: 'textarea',
plugins: 'tinycomments lists link image table code help wordcount',
toolbar: 'addcomment showcomments undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent',
tinycomments_mode: 'embedded',
tinycomments_author: currentAuthor,
tinycomments_author_name: 'Athena, Goddess of Wisdom',
tinycomments_author_avatar: 'https://upload.wikimedia.org/wikipedia/commons/e/ea/Bust_Athena_Velletri_Glyptothek_Munich_213.jpg',
tinycomments_can_resolve: (req, done, fail) => {
const allowed = req.comments.length > 0 && req.comments[0].author === currentAuthor;
done({ canResolve: allowed || CurrentAuthor === 'admin_user_id' });
}
});
</script>
</body>
</html>Now Athena can resolve conversations after the students on Mount Olympus correct their essays according to her comments. Our rich text editor app is fully functional and ready to go with comments, author names and avatars, and resolve conversation functionality. We did it!
More on Comments
By default, authors can create and delete their own comments. However, they cannot delete anyone else’s feedback. If you want to create, for example, an Admin author who can delete other authors’ comments, you can check out the tinycomments_can_delete option in the TinyMCE docs. Or, find even more access options for TinyMCE Comments such as Read Only permissions.
TinyMCE also offers CSS flexibility to style the Comments panel, allowing you to customize the look to fit your application’s branding. From the Enhanced Skins and Icon Packs plugin to creating a custom TinyMCE skin in your own CSS file, you can choose how to style your rich text editor.
What’s next?
By following this guide, you’ve set up TinyMCE’s Comments plugin in embedded mode to help Athena leave some feedback on student essays. Thanks to your help, Athena can correct the future owner of Winged Sandals, Inc. so he can write better essays.
There’s even more collaboration features available to try if you want to use your 14-day TinyMCE trial to the fullest. Our favorite complementary plugin to the Comments plugin is the Mentions plugin, which allows users to tag specific team members within feedback. Thanks for helping us today, and happy coding!
