invisi/tinymce-docs-4x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Tiny Drive

Browse Source
This commit is contained in:
shikha
2018-09-12 15:34:46 +10:00
parent 89c1b66cf5
commit 8edba78ba6
12 changed files with 414 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_data/nav.yml
+5 -1
View File
@@ -27,6 +27,8 @@
- url: "whats-new"
- url: "basic-example"
- url: "full-featured"
- url: "tiny-drive"
- url: "moxie-manager"
- url: "editor-dfree"
- url: "inline"
- url: "classic"
@@ -146,6 +148,7 @@
url: "#spellcheckerpro"
- url: "#browser_spellcheck"
- url: "#gecko_spellcheck"
- url: "jwt-authentication"
- url: "file-image-upload"
pages:
- url: "#automatic_uploads"
@@ -227,7 +230,6 @@
pages:
- url: "#contextmenu"
- url: "#contextmenu_never_use_native"
- url: "tinycomments"
- url: "directionality"
- url: "emoticons"
- url: "mediaembed"
@@ -393,6 +395,8 @@
- url: "textpattern"
pages:
- url: "#textpattern_patterns"
- url: "tinycomments"
- url: "tinydrive"
- url: "toc"
pages:
- url: "#toc_depth"
_includes/template/bodycontents.html
+63
View File
@@ -0,0 +1,63 @@
{% if page.url contains '/demo/' %}
{% include_remote {{ site.origin }}/_docs/menu_demo.html css="body > *" %}
{% else %}
{% include_remote {{ site.origin }}/_docs/menu.html css="body > *" %}
{% endif %}
<div class="top-bar">
<div>
<div class="versions">
<div class="dropdown">
TinyMCE v4
<div class="dropdown-arrow"></div>
<div class="dropdown-options">
<a class="link-gelato" href="{{ site.baseurl }}">TinyMCE v4</a>
<a class="link-gelato" href="/docs-3x/">TinyMCE v3</a>
</div>
</div>
</div>
<div class="breadcrumbs">{% include breadcrumbs.html %}</div>
<div class="search">
<input type="text" name="seach" value="" id="searchKeywordInput" placeholder="Search in documentation" tabindex="1">
</div>
</div>
</div>
<div class="main {{ page.type }} {{ page.class }}">
<aside class="side-nav">
{% assign nav = site.data.nav | array_concat:site.data.nav_api %}
{% include nav.html links=nav preceding_address="/" %}
</aside>
<div class="heading">
<h1 class="light">{{ page.title }}</h1>
<h2 class="light">{{ page.description }}</h2>
{% if page.url contains '/api/' %}
<!-- Disabled since there is no git link -->
{% else %}
<a class="contribute link-garlic" href="https://github.com/tinymce/tinymce-docs/tree/master/{{ page.path }}">Contribute to this page<i></i></a>
{% endif %}
{% if page.controls %}
{% assign controls = page.controls | split:',' %}
<div class="badges">
{% for control in controls %}<span class="badge-naan lg">+ {{ control }}</span> {% endfor %}
</div>
{% endif %}
</div>
<div class="content">
{{ content }}
{% include feedback.html %}
<p class="let-us-know">
Can't find what you're looking for?
<a href="#" data-modal="let-us-know">
Let us know.
</a>
</p>
{% include license.html %}
</div>
</div>
{% include_remote {{ site.origin }}/_docs/footer.html css="body > *" %}
<script src="{{ site.shared_baseurl }}/scripts/common.min.js"></script>
<script src="{{ site.shared_baseurl }}/scripts/docs.min.js"></script>
_includes/template/head.html
+21
View File
@@ -0,0 +1,21 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ page.meta_description | or:page.description }}">
<meta name="keywords" content="{{ page.meta_keywords | or:site.default_meta_keywords }}">
<meta property="og:og:site_name" content="TinyMCE.com">
<meta property="og:title" content="TinyMCE | {{ page.meta_title | or:page.title }}">
<meta property="og:type" content="website">
<meta property="og:description" content="{{ page.meta_description | or:page.description }}">
<meta property="og:image" content="https://www.tinymce.com/images/fb-share@2x.png">
<title>TinyMCE | {{ page.meta_title | or:page.title }}</title>
<link href="//cdn.jsdelivr.net/docsearch.js/2.2.1/docsearch.min.css" rel="stylesheet" />
<link href="{{ site.shared_baseurl }}/css/common.min.css" rel="stylesheet">
<link href="{{ site.shared_baseurl }}/css/docs.min.css" rel="stylesheet">
<link href="//fast.fonts.net/cssapi/5d4ae438-4aca-4c75-8249-d9486d12b12e.css" rel="stylesheet">
<!-- link href="//afeld.github.io/emoji-css/emoji.css" rel="stylesheet" -->
{% include_remote {{ site.origin }}/_docs/head.html css="head > *" %}
</head>
_layouts/default.html
+2 -80
View File
File diff suppressed because one or more lines are too long
_layouts/draft.html
+16
View File
@@ -0,0 +1,16 @@
---
layout: compress
---
<html>
{% include template/head.html %}
<body role="document" data-shared-baseurl="{{ site.shared_baseurl }}" data-baseurl="{{ site.baseurl }}" class="tiny-draft">
<style>
.content {
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('{{site.baseurl}}/images/DRAFT.svg') ;
background-size: 850px;
}
</style>
{% include template/bodycontents.html %}
</body>
</html>
_scripts/serve.sh
+1 -1
View File
@@ -1,3 +1,3 @@
#!/bin/bash
rm -rf _site
bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml
bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml --host=0.0.0.0
configure/jwt-authentication.md
+92
View File
@@ -0,0 +1,92 @@
---
layout: draft
title: JWT Authentication
description_short: JWT Authentication
description: JWT tokens is a common way for authorization of 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 is allowed to access a particular feature. Jwt tokens is a common way for authorization of web services and is documented more detail at the [https://jwt.io/](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 tokes 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 since we don't store the private key only you have access to that key and only you can produce valid jwt 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 shop account page 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
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.
## PHP Token provider example
This example uses the [firebase jwt library](https://github.com/firebase/php-jwt) provided though [composer](https://getcomposer.org/). The private key should be the private key that got generated on the store page. Each service requires different claims to be provided so the example shows the sub and name claims needed for tiny drive.
<?php
require 'vendor/autoload.php';
use \Firebase\JWT\JWT;
$privateKey = <<<EOD
-----BEGIN RSA PRIVATE KEY-----
....
-----END RSA PRIVATE KEY-----
EOD;
$payload = array(
"sub" => "123", // Unique user id string
"name" => "John Doe", // Full name of user
"exp" => time() + 60 * 10 // 10 minutes expiration
);
try {
$token = JWT::encode($payload, $privateKey, 'RS256');
http_response_code(200);
header('Content-Type: application/json');
echo json_encode(array("token" => $token));
} catch (Exception $e) {
http_response_code(500);
header('Content-Type: application/json');
echo $e->getMessage();
}
?>
## Node Token provider example
This example shows you how to setup a node js express handler that produces the jwt tokens. It requires you to install [express](https://expressjs.com/) and the [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) node modules. Each service requires different claims to be provided so the example shows the sub and name claims needed for tiny drive.
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const privateKey = `
-----BEGIN RSA PRIVATE KEY-----
....
-----END RSA PRIVATE KEY-----
`;
app.post('/jwt', function (req, res) {
const payload = {
sub: '123', // Unique user id string
name: 'John Doe', // Full name of user
exp: Math.floor(Date.now() / 1000) + (60 * 10) // 10 minutes expiration
};
try {
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);
}
});
app.listen(3000);
## Tiny drive specific jwt claims:
**sub** - (required) Unique string to identify the user. This can be a database id, hashed email address or similar.
**name** - (required) Full name of the user this will be used for presentation inside tiny drive when a user uploads a file the user name is presented as the creator of that file.
demo/moxie-manager.md
+14
View File
@@ -0,0 +1,14 @@
---
layout: draft
title: MoxieManager
title_nav: MoxieManager
description_short: MoxieManager
description: MoxieManager. A premium plugin to manage files & images.
keywords: moxiemanager .net php relative_urls
---
## Live example
This example shows you how to use Moxie Manager for your file and image management. 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.
{% include codepen.html id="" %}<codepen>
demo/tiny-drive.md
+14
View File
@@ -0,0 +1,14 @@
---
layout: draft
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
---
## 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/).
{% include codepen.html id="" %}<codepen>
enterprise/manage-files-and-images.md
+35 -1
View File
@@ -1,10 +1,42 @@
---
layout: default
layout: draft
title: Manage Files & Images
description: MoxieManager. A premium plugin to manage files & images.
keywords: moxiemanager .net php relative_urls
---
## File and Image Management Using Tiny Drive
### Cloud-based file and image management for TinyMCE
The “rich” in rich text generally means images, videos, and other files that are attached or embedded in your document. Until now, it has been difficult and time-consuming to wire up file upload and management to TinyMCE.
To solve this issue, we’re excited to announce the release of Tiny Drive, our cloud-based asset management and storage solution.. If you’ve ever marveled at Google Drive and its ease of use, or considered our own MoxieManager for self-hosted asset management but been discouraged by the server requirements, then Drive will be an excellent solution for you.
### Getting started
If you you would like to try out Drive and our Cloud-delivered editor, the first step is to create a free Tiny account. When you create an account, you are assigned an API key, which is required for the implementation of Drive. In addition, the API key is also provisioned with a free 30-day trial of all of our premium plugins, with no credit card information or commitment required.
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 just need to complete a few more [easy?] steps, outlined in our documentation (link).
We are launching the service with a complimentary 100MB of storage and up to 1 GB of bandwidth.
Security
We know security is a primary concern when it comes to cloud storage. Drive uses an Amazon Web Services 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.)
And 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 (JWT) to authenticate each data transaction. Each Drive user will need to create their own JWT, and we walk you through the whole process (link to JWT section of docs).
### What’s next for Drive?
We are working on allowing you the ability to store content in your own corporate S3 bucket. And after that...you tell us! (link to contact form) With what other storage providers should we integrate? Are you happy with using the Tiny S3 bucket, but want more storage and bandwidth? What other features do you want to see on Drive?
We are always thrilled to hear from our users, so please reach out and let us know what you think will make Drive -- or any of our products -- even better.
In the meantime, you can find us on Twitter (link) and Github (link), and you can sign up for our newsletter below to stay up-to-date on all the latest and greatest with Tiny.
Full documentation on Tiny Drive can be found [here](({{site.baseurl}}/plugins/tinydrive) on the TinyMCE website.
We also have a demo for you to explore the Tiny Drive capabilities [here]({{site.baseurl}}/demo/tiny-drive/).
## File and Image Management Using Moxie Manager
{% include pardot-px-moxiemanager.html %}
MoxieManager is a premium TinyMCE plugin and server system that enables users to insert files located externally to the editor (e.g. on their client desktop) into their document.
@@ -14,3 +46,5 @@ MoxieManager is an application separate from TinyMCE that includes .NET or PHP s
MoxieManager is a paid addition to TinyMCE. It is included in [TinyMCE subscriptions](https://www.tinymce.com/pricing/).
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/).
plugins/tinycomments.md
+1 -1
View File
@@ -1,7 +1,7 @@
---
layout: default
title: Tiny Comments
title_nav: Comments
title_nav: Tiny 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
---
plugins/tinydrive.md
+150
View File
@@ -0,0 +1,150 @@
---
layout: draft
title: Tiny Drive
title_nav: Tiny Drive
description: Cloud-based file and image management for TinyMCE.
keywords: tinydrive storage media tiny drive
---
This plugin adds the functionality to upload and manage files and images to the cloud. This plugin is only available in Tiny Cloud and requires you to register for an API key. To enable this functionality, add the `tinydrive` to the list of plugins in the `tinymce.init` call. You also also need to authenticate the user using a JWT token.
Once you enable Drive it, by default, 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.
## Example
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive'
});
## Options
These settings are necessary to make Drive work.
## `tinydrive_token_provider`
This setting could either be an URL to a page that takes a 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.
It can also be a function that provides the same token though 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 a 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.
You can read more about how to create these JWT tokens in the [JWT authentication]({{site.baseurl}}/configure/jwt-authentication/) guide.
**Type:** `String` or `Function`
**Required:** yes
## Example using a JWT token provider URL
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'tinydrive',
tinydrive_token_provider: '/jwt'
});
## Example using a JWT token provider callback
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
tinydrive_token_provider: function (success, failure) {
success({ token: 'jwt-token' });
// failure('Could not create a jwt token')
}
});
## `tinydrive_upload_path`
This setting allows you to change the default upload path for files that get uploaded when pasting content into the editor or uploading directly though the Image dialog or when you drag-and-drop into the editor. It will produce a date based structure within this path like this /uploads/{year}/{month}/{day}. This is to avoid having thousands of files in the same directory as having the default `automatic_uploads` setting enabled it will automatically upload files directly after images are added to the editor.
**Type:** `String`
**Default Value:** `"/uploads"`
## Example
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
tinydrive_upload_path: '/some/other/path'
});
## Insert File toolbar button
Drive will automatically integrate into the Image, Link, and Media dialogs as a custom file picker. You can also configure it to insert files directly into your content using the '`insertfile`' button. To enable this button add it to your toolbar editor setting.
The Insert File toolbar button will insert an images as `img` tags or other files as links to that file.
## Example of toolbar button
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "tinydrive",
toolbar: 'insertfile'
});
## Restrictions and quotas
Tiny drive has some restrictions on what files you can upload and how large these files can be. Here is a list of the current restrictions for Drive.
- The maximum file size is currently set to 100MB.
- Allowed image extensions: gif, jpeg, jpg, png, tif, tiff, bmp
- Allowed document extensions: doc, xls, ppt, pps, docx, xlsx, pptx, pdf, rtf, txt, keynote, pages, numbers
- Allowed audio extensions: wav, wave, mp3, ogg, ogv, oga, ogx, ogm, spx, opus
- Allowed video extensions: mp4 m4v, ogv, webm, mov
- Allowed archive extensions: zip
## Upload files URL
All files are uploaded to a central storage with a CDN endpoint that means that we are hosting your files and they are publicly available in read only mode for anyone that has access to the URL of that file. The URL format for each file is `https://drive.tiny.cloud/1/{your-api-key}/{uuid}` and gets generated when a file is uploaded if you move or rename a file it will still have the same unique URL so restructuring of you files using Drive won't affect where they are being used. However, deleting a file will make mark the URL as being unused and the URL will not continue to work.
## Internal Tiny Drive Options
There are some somewhat internal settings to the client side part of tinydrive aka "clerk" there are publically available but should not be documented externally.
## `tinydrive_script_url`
This setting allows you to override the default path where the lazy loaded asset manager js file is loaded from.
## Example
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive',
tinydrive_script_url: 'somedir/assetmanager.js'
});
## `tinydrive_css_url`
This setting allows you to override the default path where the lazy loaded asset manager css file is loaded from.
## Example
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive',
tinydrive_css_url: 'somedir/assetmanager.css'
});
## `tinydrive_demo_files_url`
This setting allows you to create a fake memory only file system from a json structure this allows us to mimic a real file system and demo tiny drive without having to rely on a real server. This will override the `tinydrive_service_url` and `tinydrive_token_provider` settings.
## Example
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive',
tinydrive_demo_files_url: 'files.json'
});
## `tinydrive_service_url`
This setting allows you to specify where the api endpoint for the backend is it will do requests based on that endpoint like this `{tinydrive_service_url}/{version}/{path}` for example [`http://localhost:4000/1/client/files/list`](http://localhost:4000/1/client/files/list) . This should be configured to the api gateway endpoint for staging, production or local development.
## Example
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'tinydrive',
tinydrive_service_url: 'http://localhost:4000/'
});