description: JWT is a common authorization solution for web services.
---
Some cloud services for TinyMCE require you to setup JWT authentication. This allows us to verify that you and your end user are allowed to access a particular feature. JWT is a common authorization solution for web services and is documented in more detail at the https://jwt.io/ website. This guide aims to show how to setup JWT authentication for the cloud services provided for TinyMCE.
### Audience
This section is intended to be used by developers with prior knowledge of JSON Web Tokens (or JWTs) in detail, including how they can be used for User Authentication and Session Management in a Web Application. To configure JWT as per the instructions in this section, there will be some coding involved on both the client-side and the server-side.
## Introduction
Some cloud services for TinyMCE require you to setup JSON web tokens authentication. This allows us to verify that you and your end user are allowed to access a particular feature. JWT is a common authorization solution for web services and is documented in more detail at the https://jwt.io/ website. This guide aims to show how to setup JWT authentication for the cloud services provided for TinyMCE.
## Private/Public Key Pair
JWT tokens used by the TinyMCE cloud services are done using a public/private RSA key. This allows you as an integrator to have full control over the authentication as we don't store the private key. Only you have access to the private key, and only you can produce valid JWT tokens. We can only verify that they are valid and extract user information from that token.
JWT used by the TinyMCE cloud services are done using a public/private RSA key. This allows you as an integrator to have full control over the authentication as we don't store the private key. Only you have access to the private key, and only you can produce valid JWT. We can only verify that they are valid and extract user information from that token.
The private/public key pair is created in your [Tiny account page](https://apps.tiny.cloud/my-account/jwt-key-manager/), but we only store the public key on our side. The private key is for you to store in your backend.
description: Tiny Drive. A premium plugin to manage files & images.
keywords: tinydrive .net php relative_urls
---
## Live example
This example shows you how to use Tiny Drive for your file and image management. For more information on the `tinydrive` plugin, see the [docs]({{site.baseurl}}/plugins/drive/).
description: Tiny Drive. A premium plugin to manage files & images.
keywords: tinydrive .net php relative_urls
---
## Live example
This example shows you how to use Tiny Drive for your file and image management. For more information on the Tiny Drive plugin, see the [docs]({{site.baseurl}}/plugins/tinydrive/).
description: MoxieManager. A premium plugin to manage files & images.
keywords: moxiemanager .net php relative_urls
@ -17,5 +17,5 @@ MoxieManager is a paid addition to TinyMCE. It is included in [TinyMCE subscript
Full documentation on MoxieManager, including how to [integrate with TinyMCE](http://www.moxiemanager.com/documentation/index.php/TinyMCE_Integration), can be [found](http://www.moxiemanager.com/documentation/) on the MoxieManager website.
We also have a demo for you to explore the Tiny Drive capabilities [here]({{site.baseurl}}/demo/moxie-manager/).
// We also have a demo for you to explore the Tiny Drive capabilities [here]({{site.baseurl}}/demo/moxie-manager/).
description: Tiny Comments provides the ability to add comments to the content and collaborate with other users for content editing.
keywords: enterprise pricing comment commenting
---
TinyMCE editor now has a highly desirable functionality, **Tiny Comments**.
TinyMCE editor now has a highly desirable functionality, [Comments](#commentsdemo).
The Tiny Comments plugin provides the user an ability to start or join a conversation by adding comments to the content within the TinyMCE editor.
The Comments plugin provides the user an ability to start or join a conversation by adding comments to the content within the TinyMCE editor.
Users can now add comments to their text from within their TinyMCE editor for collaboration, review, and providing feedback.
## Collaborate on your projects within your content
Tiny Comments offers the following primary functionality:
Comments offers the following primary functionality:
* A **user interface** to collaborate on content by creating and replying to comments.
* A way to control the delete operation on a comment/comment thread if you want to remove it from your content.
## Primary Tiny Comments Functions
## Primary Comments Functions
The Tiny Comments plugin allows the user to perform the following functions:
The Comments plugin allows the user to perform the following functions:
* Create a comment
* Reply to a comment
@ -29,18 +29,18 @@ The Tiny Comments plugin allows the user to perform the following functions:
* Lookup a comment
* Store a comment
## Tiny Comments Integration
## Comments Integration
We provide a working example for integrating the TinyMCE plugin into your site.
> Note: For more information on installing and configuring Tiny Comments, please visit our [documentation]({{ site.baseurl }}/plugins/tinycomments/).
> Note: For more information on installing and configuring Tiny Comments, please visit our [documentation]({{ site.baseurl }}/plugins/comments/).
### Buy Tiny Comments
### Buy Comments
Start with our [dedicated product page](https://www.tiny.cloud/pricing/) to see our flexible pricing options. Enterprise customers should [contact sales directly](https://www.tinymce.com/pricing/). Still not sure? Check out the demo below.
## Tiny Comments Demo
## Comments Demo
In this example, we highlight the features in Tiny Comments, including adding a comment, replying to a comment, and deleting a comment. For more information on the other Tiny Comments configuration options, see the [docs]({{ site.baseurl }}/plugins/tinycomments/).
In this example, we highlight the features in Comments, including adding a comment, replying to a comment, and deleting a comment. For more information on the other Comments configuration options, see the [docs]({{ site.baseurl }}/plugins/comments/).
description: Tiny Drive. A premium plugin to manage files & images.
keywords: tinydrive .net php relative_urls
---
### Cloud-based File and Image Management for TinyMCE
Tiny Drive is a premium TinyMCE plugin for cloud-based asset management and storage solution. Tiny Drive is a solution for creating rich text by attaching and embedding images, videos, and other files in your document.
Tiny Drive is a premium TinyMCE plugin for cloud-based asset management and storage solution. Drive is a solution for creating rich text by attaching and embedding images, videos, and other files in your document.
Drive presents a cloud-based asset management and storage solution that provides the ease of use of Google Drive without the server requirements of a self-hosted asset manager such as our own MoxieManager.
@ -35,4 +36,4 @@ And to make sure your assets are delivered as fast as possible, we utilize the [
For more information on Drive see our full [documentation]({{site.baseurl}}/plugins/tinydrive/).
We also have a demo for you to explore the Tiny Drive capabilities [here]({{site.baseurl}}/demo/tiny-drive/).
We also have a demo for you to explore the Drive capabilities [here]({{site.baseurl}}/demo/tiny-drive/).
The Tiny Comments plugin provides the user an ability to start or join a conversation by adding comments to the content within the TinyMCE editor. The Tiny Comments plugin is built upon the new [Annotations API]({{ site.baseurl }}/advanced/annotations/) and uses annotations to create comment threads (conversations).
The Tiny Comments plugin provides the user an ability to start or join a conversation by adding comments to the content within the TinyMCE editor. The Comments plugin is built upon the new [Annotations API]({{ site.baseurl }}/advanced/annotations/) and uses annotations to create comment threads (conversations).
This section describes the various configuration options for the Tiny Comments plugin.
This section describes the various configuration options for the Comments plugin.
## Storage
Like TinyMCE, the Tiny Comments plugin does not directly provide the user an ability to save the comments. You need to configure storage at your end to be able to save comments on your server. You can choose to configure your storage settings to either persist them immediately or save them at the same time as the content.
Like TinyMCE, the Comments plugin does not directly provide the user an ability to save the comments. You need to configure storage at your end to be able to save comments on your server. You can choose to configure your storage settings to either persist them immediately or save them at the same time as the content.
How you store those comments affects when other users see new comments. The Tiny Comments functions (create, reply, delete, and lookup) are configured differently depending upon the server-side storage configuration.
How you store those comments affects when other users see new comments. The Comments functions (create, reply, delete, and lookup) are configured differently depending upon the server-side storage configuration.
In this chapter, we have provided examples of both ways of configuring Tiny Comments storage.
In this chapter, we have provided examples of both ways of configuring Comments storage.
### Storage - persist in real-time
Here is a demo to showcase the Tiny Comments functionality using storage configured to persist in real-time:
Here is a demo to showcase the Comments functionality using storage configured to persist in real-time:
{% include codepen.html id="pOzxJw" %}
### Storage - persist on content-save
Here is a demo to showcase the Tiny Comments functionality using storage configured to persist on content-save.
Here is a demo to showcase the Comments functionality using storage configured to persist on content-save.
{% include codepen.html id="4d07e4da27b1e7245b5333ed7413083b" %}
@ -51,9 +51,9 @@ We have used the following helper functions in our demo above:
* **getAuthorDisplayName(uid)**
`getAuthorDisplayName(authorID)` is a function to retrieve an existing conversation via a conversation UID (`authorID` in our example).
## Tiny Comments Implementation Functions
## Comments Implementation Functions
Tiny Comments requires four functions to be defined:
Comments requires four functions to be defined:
```js
tinymce.init({
@ -75,15 +75,15 @@ However, if you are persisting comments directly back to a server as they are ma
#### Display Names
Tiny Comments expects each comment to contain the author's _display name_, not a user ID, as Tiny Comments does not know the user identities. Your implementation of `lookup` will most likely need to consider this and resolve user identifiers to an appropriate display name.
Comments expects each comment to contain the author's _display name_, not a user ID, as Comments does not know the user identities. Your implementation of `lookup` will most likely need to consider this and resolve user identifiers to an appropriate display name.
#### Current Author
Tiny Comments does not know the name of the current user. After a user comments (triggering `create` for the first comment, or `reply` for subsequent comments) Tiny Comments requests the updated conversation via `lookup`, which should now contain the additional comment with the proper author. Determining the current user, and storing the comment related to that user, has to be done by the user.
Comments does not know the name of the current user. After a user comments (triggering `create` for the first comment, or `reply` for subsequent comments) Comments requests the updated conversation via `lookup`, which should now contain the additional comment with the proper author. Determining the current user, and storing the comment related to that user, has to be done by the user.
### Create
Tiny Comments uses the Conversation `create` function to create a comment.
Comments uses the Conversation `create` function to create a comment.
The `create` function saves the comment as a new conversation and returns a unique conversation ID via the `done` callback. If an unrecoverable error occurs, it should indicate this with the `fail` callback.
@ -134,7 +134,7 @@ function create(content, done, fail) {
### Reply
Tiny Comments uses the Conversation `reply` function to reply to a comment.
Comments uses the Conversation `reply` function to reply to a comment.
The `reply` function saves the comment as a reply to an existing conversation and returns via the `done` callback once successful. Unrecoverable errors are communicated to TinyMCE by calling the `fail` callback instead.
@ -188,7 +188,7 @@ function reply(uid, content, done, fail) {
### Delete
Tiny Comments uses the Conversation `delete` function to delete an entire conversation.
Comments uses the Conversation `delete` function to delete an entire conversation.
The `delete` function should asynchronously return a flag indicating whether the comment/comment thread was removed using the `done` callback. Unrecoverable errors are communicated to TinyMCE by calling the `fail` callback instead.
@ -240,7 +240,7 @@ Here is an example of how `delete` can be implemented using storage configured t
### Lookup
Tiny Comments uses the Conversation `lookup` function to retrieve an existing conversation via a conversation unique ID.
Comments uses the Conversation `lookup` function to retrieve an existing conversation via a conversation unique ID.
The conventional conversation object structure that should be returned via the `done` callback is as follows:
@ -321,4 +321,4 @@ function lookup(uid, done, fail) {
}
```
For more information on Tiny Comments commercial feature, visit our [Premium Features]({{ site.baseurl }}/enterprise/tiny-comments/) page.
For more information on Comments commercial feature, visit our [Premium Features]({{ site.baseurl }}/enterprise/tiny-comments/) page.
description: Cloud-based file and image management for TinyMCE.
keywords: tinydrive storage media tiny drive
@ -8,7 +8,7 @@ keywords: tinydrive storage media tiny drive
The Tiny Drive plugin adds the functionality to upload and manage files and images to the cloud. This plugin is only available in [Tiny Cloud](https://www.tiny.cloud/download/) and requires you to register for an API key.
To enable this functionality, add `tinydrive` to the list of plugins in the `tinymce.init` call. You also need to authenticate the user using a [JWT token]({{site.baseurl}}/configure/jwt-authentication).
To enable this functionality, add `tinydrive` to the list of plugins in the `tinymce.init` call. You also need to authenticate the user using a [JSON Web token]({{site.baseurl}}/configure/jwt-authentication).
Once you enable Drive it integrates as the default file picker for the Image, Link, and Media dialogs and as the default upload handler for local images being pasted or inserted into the document.
@ -24,14 +24,14 @@ tinymce.init({
## Options
These settings are necessary to make Tiny Drive work:
These settings are necessary to make Drive work:
### `tinydrive_token_provider`
This setting could take one of the following two forms:
* A URL to a page that takes an HTTP JSON POST request and produces a JSON structure with a valid JWT token. It uses a POST request to avoid caching by browsers and proxies.
* A function that provides the same token through a callback. This allows you to make your own HTTP request in any format you like. The provider function is a function that has a success and failure callback where the success takes an object with a token property containing the JWT token, and the failure callback takes a string to present as an error message if the token could not be produced.
* A URL to a page that takes an HTTP JSON POST request and produces a JSON structure with a valid JWT. It uses a POST request to avoid caching by browsers and proxies.
* A function that provides the same token through a callback. This allows you to make your own HTTP request in any format you like. The provider function is a function that has a success and failure callback where the success takes an object with a token property containing the JWT, and the failure callback takes a string to present as an error message if the token could not be produced.
You can read more about how to create these JWT tokens in the [JWT authentication]({{site.baseurl}}/configure/jwt-authentication/) guide.
@ -98,7 +98,7 @@ tinymce.init({
## Restrictions and Quotas
Tiny Drive has restrictions on what files can be uploaded and how large these files can be:
Drive has restrictions on what files can be uploaded and how large these files can be:
@ -50,7 +50,7 @@ In this example, let's replace `<textarea id='mytextarea'>` with a TinyMCE edito
</html>
```
> Note: If you're testing this locally, you will need to prepend `https://` to urls in the `script` tag. For example, `<script src='https:{{ site.cdnurl }}'></script>`.
> Note: If you're testing this locally, you will need to prepend `https://` to urls in the `script` tag. For example, `<script src='{{ site.cdnurl }}'></script>`.
shikha
7 years ago