Add changes to Drive and Comments
This commit is contained in:
shikha
+3
-3
@@ -27,7 +27,7 @@
|
||||
- url: "whats-new"
|
||||
- url: "basic-example"
|
||||
- url: "full-featured"
|
||||
- url: "tiny-drive"
|
||||
- url: "drive"
|
||||
- url: "moxie-manager"
|
||||
- url: "editor-dfree"
|
||||
- url: "inline"
|
||||
@@ -226,12 +226,13 @@
|
||||
- url: "colorpicker"
|
||||
pages:
|
||||
- url: "#color_picker_callback"
|
||||
- url: "comments"
|
||||
- url: "contextmenu"
|
||||
pages:
|
||||
- url: "#contextmenu"
|
||||
- url: "#contextmenu_never_use_native"
|
||||
- url: "directionality"
|
||||
- url: "tinydrive"
|
||||
- url: "drive"
|
||||
- url: "emoticons"
|
||||
- url: "mediaembed"
|
||||
- url: "fullpage"
|
||||
@@ -396,7 +397,6 @@
|
||||
- url: "textpattern"
|
||||
pages:
|
||||
- url: "#textpattern_patterns"
|
||||
- url: "tinycomments"
|
||||
- url: "toc"
|
||||
pages:
|
||||
- url: "#toc_depth"
|
||||
|
||||
@@ -1,37 +1,70 @@
|
||||
---
|
||||
layout: draft
|
||||
layout: default
|
||||
title: JWT Authentication
|
||||
description_short: JWT Authentication
|
||||
description: JWT tokens is a common way for authorization of web services.
|
||||
description: JWT is a common authorization solution for web services.
|
||||
---
|
||||
|
||||
Some cloud services for TinyMCE requires you to setup JWT token authentication. This allows us to verify that you and your end user are allowed to access a particular feature. JWT tokens are a common way for authorization of web services and they are 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 Token (or JWT) in detail, including how they can be used for user authentication and session management in a web application. There will be some coding involved on both the client-side and the server-side to configure JWT as per the instructions in this section.
|
||||
|
||||
## Introduction
|
||||
|
||||
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. The 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.
|
||||
Tokens used by the TinyMCE cloud services make use of a public/private RSA key-pair. 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 tokens. 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, but we only store the public key on our side. The private key is for you to store in your backend.
|
||||
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.
|
||||
|
||||
|
||||
## JWT Token Provider URL
|
||||
## JWT Provider URL
|
||||
|
||||
The easiest way to setup JWT token authentication against TinyMCE cloud services is to create a JWT token provider page. This page takes a JSON HTTP POST request and produces a JSON result with the token that the service will then use for all the HTTP requests.
|
||||
The easiest way to setup JWT authentication against TinyMCE cloud services is to create a JWT provider endpoint. This endpoint takes a JSON HTTP POST request and produces a JSON result with the token that the service will then use for all the HTTP requests.
|
||||
|
||||
The following diagram explains the JWT call flow:
|
||||
|
||||
|
||||
|
||||
## JWT requirements
|
||||
|
||||
### Algorithm
|
||||
|
||||
The following algorithms are supported for the JWT header/signature:
|
||||
|
||||
* RS256
|
||||
* RS384
|
||||
* RS512
|
||||
* PS256
|
||||
* PS384
|
||||
* PS512
|
||||
|
||||
All of these algorithms use the private RSA key to sign the JWT, but vary in how they execute. `RS256`, the most widely supported algorithm, features in following code examples.
|
||||
|
||||
### Claims:
|
||||
|
||||
* **sub** - _(required)_ Unique string to identify the user. This can be a database ID, hashed email address, or similar identifier.
|
||||
* **name** - _(required)_ Full name of the user that will be used for presentation inside Tiny Drive. When the user uploads a file, this name is presented as the creator of that file.
|
||||
|
||||
## PHP Token Provider Example
|
||||
|
||||
This example uses the [Firebase JWT library]("https://github.com/firebase/php-jwt") provided through the Composer dependency manager. The private key should be the private key that was generated through your Tiny Account. Each service requires different claims to be provided. The following example shows the sub and name claims needed for Tiny Drive.
|
||||
This example uses the [Firebase JWT library](https://github.com/firebase/php-jwt) provided through the Composer dependency manager. The private key should be the private key that was generated through your Tiny Account. Each service requires different claims to be provided. The following example shows the sub and name claims needed for Tiny Drive.
|
||||
|
||||
```js
|
||||
```php
|
||||
<?php
|
||||
require 'vendor/autoload.php';
|
||||
use \Firebase\JWT\JWT;
|
||||
|
||||
header("Access-Control-Allow-Origin: *");
|
||||
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
|
||||
|
||||
$privateKey = <<<EOD
|
||||
-----BEGIN RSA PRIVATE KEY-----
|
||||
-----BEGIN PRIVATE KEY-----
|
||||
....
|
||||
-----END RSA PRIVATE KEY-----
|
||||
-----END PRIVATE KEY-----
|
||||
EOD;
|
||||
|
||||
$payload = array(
|
||||
@@ -55,17 +88,20 @@ try {
|
||||
|
||||
## Node Token Provider Example
|
||||
|
||||
This example shows you how to set up a Node.js express handler that produces the JWT tokens. It requires you to install the Express web framework and the JSON web token Node modules. Each service requires different claims to be provided. The following example shows the sub and name claims needed for Tiny Drive.
|
||||
This example shows you how to set up a Node.js express handler that produces the tokens. It requires you to install the Express web framework and the `jsonwebtoken` Node modules. Each service requires different claims to be provided. The following example shows the sub and name claims needed for Tiny Drive.
|
||||
|
||||
```js
|
||||
const express = require('express');
|
||||
const jwt = require('jsonwebtoken');
|
||||
const cors = require('cors');
|
||||
|
||||
const app = express();
|
||||
app.use(cors());
|
||||
|
||||
const privateKey = `
|
||||
-----BEGIN RSA PRIVATE KEY-----
|
||||
-----BEGIN PRIVATE KEY-----
|
||||
....
|
||||
-----END RSA PRIVATE KEY-----
|
||||
-----END PRIVATE KEY-----
|
||||
`;
|
||||
|
||||
app.post('/jwt', function (req, res) {
|
||||
@@ -76,16 +112,16 @@ app.post('/jwt', function (req, res) {
|
||||
};
|
||||
|
||||
try {
|
||||
const token = jwt.sign(payload, privateKey, { algorithm: 'RS256'});
|
||||
res.set('content-type', 'application/json');
|
||||
res.status(200);
|
||||
res.send(JSON.stringify({
|
||||
token: token
|
||||
}));
|
||||
const token = jwt.sign(payload, privateKey, { algorithm: 'RS256'});
|
||||
res.set('content-type', 'application/json');
|
||||
res.status(200);
|
||||
res.send(JSON.stringify({
|
||||
token: token
|
||||
}));
|
||||
} catch (e) {
|
||||
res.status(500);
|
||||
res.send(e.message);
|
||||
}
|
||||
res.status(500);
|
||||
res.send(e.message);
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(3000);
|
||||
|
||||
@@ -4,12 +4,12 @@ title: Tiny Drive
|
||||
title_nav: Tiny Drive
|
||||
description_short: Tiny Drive
|
||||
description: Tiny Drive. A premium plugin to manage files & images.
|
||||
keywords: tinydrive .net php relative_urls
|
||||
keywords: tinydrive storage media tiny drive
|
||||
---
|
||||
|
||||
## 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/).
|
||||
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/drive/).
|
||||
|
||||
<textarea>
|
||||
<h2>The world's first rich text editor in the cloud</h2>
|
||||
@@ -36,7 +36,7 @@ This example shows you how to use Tiny Drive for your file and image management.
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cloud.tinymce.com/dev/tinymce.min.js?apiKey=mewrstxy1qafkxzgwrof3s2apj0mnccleag1rsj527bs02fd"></script>
|
||||
<script src="https://devpreview.tiny.cloud/demo/tinymce.min.js"></script>
|
||||
<script>
|
||||
|
||||
tinymce.init({
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: draft
|
||||
layout: default
|
||||
title: MoxieManager
|
||||
title_nav: MoxieManager
|
||||
description_short: MoxieManager
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
title: Tiny Comments
|
||||
title: Comments
|
||||
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
|
||||
---
|
||||
@@ -33,7 +33,7 @@ The Tiny Comments plugin allows the user to perform the following functions:
|
||||
|
||||
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
|
||||
|
||||
@@ -41,6 +41,6 @@ Start with our [dedicated product page](https://www.tiny.cloud/pricing/) to see
|
||||
|
||||
## Tiny 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 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/comments/).
|
||||
|
||||
{% include codepen.html id="pOzxJw" %}
|
||||
|
||||
+11
-10
@@ -1,38 +1,39 @@
|
||||
---
|
||||
layout: draft
|
||||
title: Tiny Drive
|
||||
layout: default
|
||||
title: Drive
|
||||
title_nav: Drive
|
||||
description: Tiny Drive. A premium plugin to manage files & images.
|
||||
keywords: tinydrive .net php relative_urls
|
||||
---
|
||||
|
||||
### Cloud-based File and image Management for TinyMCE
|
||||
### 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.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
### Getting Started
|
||||
|
||||
#### Creating an Account
|
||||
|
||||
If you would like to try out Drive and our Cloud-delivered editor, the first step is to create a free [Tiny account]("https://www.tiny.cloud/download/"). When you create an account, you are assigned an API key, which is required for the implementation of Drive.
|
||||
If you would like to try out Drive and our Cloud-delivered editor, the first step is to create a free [Tiny account](https://www.tiny.cloud/download/). When you create an account, you are assigned an API key, which is required for the implementation of Drive.
|
||||
|
||||
> The API key is also provisioned with a free 30-day trial of all of our [premium plugins](https://apps.tiny.cloud/product-category/tiny-cloud-extensions/), with no credit card information or commitment required.
|
||||
|
||||
#### Configuring the Editor for Drive
|
||||
|
||||
Once you have the API key, or if you are a current Cloud user who already has an API key, then you have access to Drive. In order to get the service up and running, you’ll need to complete a few more steps. See our [documentation]({{site.baseurl}}/plugins/tinydrive) for more information.
|
||||
Once you have the API key, or if you are a current Cloud user who already has an API key, then you have access to Drive. In order to get the service up and running, you’ll need to complete a few more steps. See our [documentation]({{site.baseurl}}/plugins/drive) for more information.
|
||||
|
||||
> We are launching the service with a complimentary 100MB of storage and up to 1 GB of bandwidth.
|
||||
|
||||
### Security & Performance
|
||||
|
||||
We know security is a primary concern when it comes to cloud storage. Drive uses an [Amazon Web Services S3]("https://aws.amazon.com/s3/") bucket, the same storage solution used by companies like Netflix, Thomson Reuters, and Zillow. (You can read about Amazon’s comprehensive security approach [here]("https://aws.amazon.com/security/").)
|
||||
We know security is a primary concern when it comes to cloud storage. Drive uses an [Amazon Web Services S3](https://aws.amazon.com/s3/) bucket, the same storage solution used by companies like Netflix, Thomson Reuters, and Zillow. (You can read about Amazon’s comprehensive security approach [here](https://aws.amazon.com/security/).)
|
||||
|
||||
As your assets are passed back and forth between your TinyMCE editor instance and the S3 bucket, Drive uses both your API key and a [JSON Web Token](https://jwt.io/introduction/) (JWT) to authenticate each data transaction. Each Drive user will need to create their own JWT, and we walk you through the whole process [here]({{site.baseurl}}/configure/jwt-authentication/).
|
||||
|
||||
And to make sure your assets are delivered as fast as possible, we utilize the [Cloudfront CDN]("https://aws.amazon.com/cloudfront/"), which is Amazon’s global content delivery network, known for its low latency and high data transfer speeds.
|
||||
And to make sure your assets are delivered as fast as possible, we utilize the [CloudFront CDN](https://aws.amazon.com/cloudfront/), which is Amazon’s global content delivery network, known for its low latency and high data transfer speeds.
|
||||
|
||||
For more information on Drive see our full [documentation]({{site.baseurl}}/plugins/tinydrive/).
|
||||
For more information on Drive see our full [documentation]({{site.baseurl}}/plugins/drive/).
|
||||
|
||||
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/drive/).
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
title: Tiny Comments
|
||||
title: Comments
|
||||
title_nav: Comments
|
||||
description: Tiny Comments provides the ability to add comments to the content and collaborate with other users for content editing.
|
||||
keywords: comments commenting tinycomments
|
||||
@@ -8,27 +8,27 @@ keywords: comments commenting tinycomments
|
||||
|
||||
## Introduction
|
||||
|
||||
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:
|
||||
The following demo showcases 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.
|
||||
The following demo showcases the Comments functionality using storage configured to persist on content-save.
|
||||
|
||||
{% include codepen.html id="4d07e4da27b1e7245b5333ed7413083b" %}
|
||||
|
||||
@@ -37,7 +37,7 @@ Here is a demo to showcase the Tiny Comments functionality using storage configu
|
||||
We have used the following helper functions in our demo above:
|
||||
|
||||
* **setConversation(uid, conversation)**
|
||||
`setConversation` is a function written to synchronously write a conversation to a form field for submission to the server later..
|
||||
`setConversation` is a function written to synchronously write a conversation to a form field for submission to the server later.
|
||||
|
||||
* **randomString()**
|
||||
`randomString()` is a function used in the `create` function to return a 62-bits random strings to provision a large number of UIDs.
|
||||
@@ -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:
|
||||
|
||||
@@ -298,7 +298,7 @@ Here is an example of how `lookup` can be implemented using storage configured t
|
||||
.catch(function() {
|
||||
fail(new Error('Something has gone wrong...'));
|
||||
})
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### Example - Storage - persist on content-save
|
||||
@@ -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.
|
||||
Reference in New Issue
Block a user