Start trial
Plans & PricingContact Us
Log InStart For Free

TinyMCE 6.1: Improvements to Commenting, Avatars, APIs and more!

July 25th, 2022

10 min read

TinyMCE - 6.1 what's new? The question asked in words on a blue background

Written by

John Rau

Category

The Tiny Way

The 2022 year continues to see more and more newness for TinyMCE.  Back in April, version 6.0 took a number of evolutionary steps and unveiled innovations like a modern new look and feel (UI), as well as lots of under-the-hood improvements.

For the TinyMCE 6.1 release (July 13), we’ve focused on providing you with a next-level commenting experience and fixing an absolute ton of customer-requested bugs.

TinyMCE 6.1 Release highlights

TinyMCE’s premium Comments plugin already checks the boxes for a robust commenting solution. Now, based on feedback from the community and our customers, commenting within TinyMCE is even better.

With TinyMCE 6.1, you can offer your users the same commenting experience that they’re used to within other popular apps.

You can now:

  • Show the comments sidebar on load
  • Comment on more content types
  • Use avatars
  • Specify a custom “Comment” button label
  • Leverage a new Comments log API

Plus, we’ve introduced over 50 bug fixes across the editor.

 

Quick links:

 

Overview

Hey it's John from Tiny and i'm joined by Frederick Danielson the product manager for TinyMCE hi Frederick hello and today we're going to talk about the highlights in tiny mce 6.1 so TinyMCE 6.1 is all about collaboration specifically commenting okay so let's take a quick look at a demo of commenting in TinyMCE 6.1 what you'll see here is some sample content that we populated in the editor with comments enabled the first thing you'll probably notice is the comment sidebar is visible by default this is a new option in TinyMCE 6.1 that can be configured in one line of code in the config what this means is your users will be able to start seeing comments within their editor without having to dig for any toolbars or menu items so they can dive right into the commenting experience the second improvement that we're introducing in 6.1 is that your users can comment on all types of content in tiny emc that means whatever they can create in the editor they can leave a comment on for example they can comment on images texts text and tables and even video anything that they can add they can comment on we believe this will lead to a much more efficient commenting experience taking a lot of the guesswork out of what content a certain comment is referring to the next thing is avatars we're really excited to introduce this feature in TinyMCE 6.1 avatars help your users feel closer together when they're collaborating and can even offer a bit of continuity from other parts of your app where avatars are being used all you have to do is specify an avatar url in the config one other popular feature request was being able to specify the comment label in the commenting ui with TinyMCE 6.1 all you have to do is specify a translation string for the comment button label and you can change the text to whatever you want it to be and lastly in TinyMCE 6.1 we're introducing the comment event api which lets your app listen for commenting events within the editor so that it can respond to them for example your app might want to listen to when a new comment is added and then be able to send out an email notification to other editors in the document that that comment was added i'll show you how it works so right now our editor is configured to log any commenting events to the console so for example if i wanted to resolve this comment here we can see what kind of information the comment event api can provide so we've got here the event with the timestamp the event type resolve who the conversation author is and the context so the content that the comment is actually on so in addition to these comments improvements we've also introduced a ton of bug fixes which i'm going to let frederick talk about it all right so TinyMCE 6.1 is not all about comments we also fixed over 52 bugs all across the board over user experience content editing and formatting images and all other places i'll recommend to head over to the release notes and check out if we have fixed any issue you might have been reported awesome and so Frederick how easy is it to upgrade from 6.0 to 6.1 it's very easy since TinyMCE 6.1 is a minor release you should be able to upgrade effortlessly without any hassle by simply downloading it or if you're using our cloud channels you will be upgraded automatically and if someone wants to use these new comments features what do they do great question so comments is available to people on our custom plan so if you are interested in using comments and you are a customer already you just need to reach out to your account manager and they can check if it's on your plan and if not help you get it on your plan or if you're not yet a customer just head over to our website fill out the contact us form and you'll be put in touch with someone on our sales team who can help you navigate the right plan and of course if you haven't upgraded to 6.0 yet now is a great time because 6.1 comes with all those bug fixes that frederick talked about plus the brand new user interface introduced in 6.0 so it's a great time to upgrade okay so i think that's it for TinyMCE 6.1 frederick did i miss anything yeah i just want to plug our TinyMCE roadmap website where you can go in and see what we are up to and submit your own future requests and ideas so head over to tiny.cloud's live roadmap and i'll hope to see your future requests soon okay that's it for today head over the road map let us know what you'd like to see in TinyMCE and give 6.1 a spin and let us know what you think

Improvements to Comments

Previously, the comment sidebar was hidden by default, and users had to open the sidebar to view comments. Now, you can set the comments sidebar as visible by default – to show it when the editor loads, add the sidebar_show option to your config:

sidebar_show: "showcomments",

By making comments visible by default, your users are able to scan, identify, action, and resolve feedback faster than ever.

2. Comment on more content types

Historically, comments have worked well with text content such as headings, paragraphs or lists. However, customers have shared that comments don’t always behave predictably when applied to other content types.

Now, your users can comment on every content type that they are able to create using TinyMCE and its official plugins – code samples, images, enhanced media embeds, videos, and more.

With the ability to comment on all content, your users are able to collaborate more efficiently, without having to guess whether a comment is referring to a sentence, image, video, or other content type.

TinyMCE 6.1  showing the comments plugin improvments in action

3. Avatars

In a world that is more digital and remote, personalizations can go a long way in connecting teams online. Avatars have been shown to make people feel closer to one another when collaborating. They can also help you deliver a consistent experience to users across multiple platforms and apps. 

TinyMCE Avatar example shown in a comment conversation

Now, you can specify avatars in conversations by specifying tinycomments_author_avatar (Embedded mode) or authorAvatar (Callback mode), which offers users a more personal, inclusive, and fun editing experience. 

Embedded mode:

tinycomments_author_avatar: "https://yourapp.app/avatars/avatar.png",

Callback mode:

authorAvatar: "https://yourapp.app/avatars/avatar.png",

Note: If you aren’t using avatars, as a fallback, the comment author’s initials will be displayed next to their comment, still providing a level of personalization.

4. Custom “Comment” button label

Every use case is different. In one app, it might make sense for people to “save” their comments. In another, they may be “submitting” or “inserting” comments. Whatever the case, you now have the ability to specify the label in the “Comment” comments button.

Just add a string translation to your tinymce.init configuration and specify what you want the label to be:

tinymce.addI18n('<optional-IETF-language-code>', {
   'Comment': '<translation>'
});

Now your users can benefit from a more predictable commenting experience that fits within the context of your app.

5. New Comments log API

What’s better than industry-leading commenting within your app?

Industry-leading commenting that integrates seamlessly with your app!

Take advantage of the new Comments event log API, which can be called to retrieve a list of commenting events, that your app can then respond to – for example sending out a notification when a comment is made, showing an in-app message when a comment has been deleted or archiving a resolved comment.

Each comment event includes:

  • Timestamp
  • Comment content
  • Context (the piece of content commented on; useful for resolve or deletions)
  • Author ID

Leveraging these new APIs can help you provide a more streamlined, tightly-integrated collaboration experience to your users – allowing your app and TinyMCE to behave as one.

Bug fixes

TinyMCE 6.1 comes with over 50 bug fixes, spanning across the editor in areas like UX, formatting, copy/paste, images and more. Highlights include:

  • Copy events were not dispatched in readonly mode
  • <pre> tags were not preserved when copying and pasting
  • In some cases pressing the Backspace or Delete key would incorrectly step into tables rather than remain outside
  • Images were not showing as selected when selected along with other content 
  • Dialogs no longer exceed window height on smaller screens
  • Notifications did not properly reposition when toggling fullscreen mode

Get TinyMCE 6.1

Anyone can get TinyMCE 6.1 and benefit from the bug fixes by following the steps below. However the Comments plugin is only available to customers on one of our custom plans. To learn more about plans and pricing, contact our sales team.

Cloud install

If you’re new to TinyMCE, you can get started right away:

  1. Navigate to the TinyMCE sign up page
  2. Enter you account information
  3. Once logged in, scroll down to the “TinyMCE Installation”  heading. Copy the code snippet under the heading.
  4. Create a new index.html file, and paste the contents into it.
  5. Save the changes, and load the test index.html file into a browser. You’ll see the latest version of TinyMCE load up.

Your TinyMCE API comes with 14-days FREE access to premium plugins (like the Comments plugin).

Cloud upgrade

Cloud access to TinyMCE has one major advantage. When a new version releases, the new additions and improvements are automatically added to the stable version number of the release that the CDN script calls out to.

This means you do not need to specify the TinyMCE 6.1 version number if you’re using Tiny Cloud.

To upgrade to the latest version of TinyMCE, check on the TinyMCE version number found within the TinyMCE CDN link URL.

  1. Locate where you have referenced TinyMCE within your application. If you’re using one of the framework integrations, this may be a specific .js file within the application directory.

  2. Check on the version number of the CDN link. It looks like this if you’re on TinyMCE version 6:

<script
  src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"
  referrerpolicy="origin"
></script>;

If you have tinymce/6/ specified, and you’re using TinyMCE Cloud, you’ll automatically receive the latest version of TinyMCE in your application. 

Looking for more on migrations and upgrades? Check on the migration guides for TinyMCE:

Self-hosted NPM

a. Install

Depending on your application design, you may need an alternative way of loading TinyMCE. To get the latest version of TinyMCE with NPM. Install TinyMCE using the npm command:

npm install tinymce

b. Upgrade

To upgrade TinyMCE to the latest version when you’ve bundled the editor:

  1. On the command line, change into the project directory.

  2. Check on the NPM version if necessary. You can compare it to the TinyMCE NPM page to see which version you are on:

npm --version tinymce
  1. Run the NPM update command to bring TinyMCE to the latest version:

npm update tinymce

Self-hosted download

a. Install

If you’re looking to self-host TinyMCE for the latest features:

  1. Navigate to the get TinyMCE page, and select “Download TinyMCE SDK now”
  2. Unzip the file
  3. Move the tinymce folder into your project directory
  4. Reference the tinymce.min.js file in your project configuration. The file can be found at tinymce/tinymce.min.js

b. Upgrade

If you’re self-hosting TinyMCE, and require the latest version:

  1. Navigate to the get TinyMCE page, and select “Download TinyMCE SDK now”
  2. Check the version number on the newly downloaded .zip file. For the TinyMCE 6.1, the file name should be tinymce_6.1.0.zip
  3. Unzip the file 
  4. Before moving the latest version of TinyMCE into your project directory, make a backup of your project in case there are any breaking changes
  5. Move the new tinymce folder to your project directory, and overwrite the older TinyMCE version
  6. Test your application out with the latest features

Vote on our next improvement

We’re always interested to hear what our customers, users and community members want us to include within TinyMCE.

Check out the new public TinyMCE Roadmap to see what’s planned and what we’re considering. Vote on features and submit your ideas to shape the future of the world’s #1 rich text editor.

TinyMCETiny ReleasesCollaborationPlugins
byJohn Rau

A former developer, John works on the Marketing team at Tiny. When he's not spreading the word about TinyMCE, he enjoys taking things apart and *trying* to put them back together (including his house and anything else that looks interesting).

Related Articles

  • The Tiny WayJan 26th, 2022

    The Tiny Way - a WYSIWYG Culture

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.