Skip to content

Commit d5830d9

Browse files
kemister85kemister85
committed
:
1 parent f302c78 commit d5830d9

File tree

4 files changed

+48
-126
lines changed

4 files changed

+48
-126
lines changed

‎modules/ROOT/examples/live-demos/uploadcare/index.html‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,3 @@
11
<textarea id="uploadcare">
2-
<h3 style="font-size: 1.5em; margin: 20px 0;">Using the Context Toolbar for Image Editing</h3>
3-
4-
<h4 style="font-size: 1.25em; margin: 15px 0;">Adding Alt Text to Images</h4>
5-
<p style="margin: 10px 0;">To add or edit alt text for an image:</p>
6-
<ol style="margin-left: 20px;">
7-
<li>Click on the image in your document to open the context toolbar.</li>
8-
<li>Locate the <strong>Alt Text</strong> field in the toolbar.</li>
9-
<li>Enter a brief description of the image content. For example:
10-
<div style="margin: 15px 0; padding: 10px 15px; border-left: 4px solid #3498db; background-color: #f0f7fb;">
11-
<p>"A mountain landscape during sunset."</p>
12-
</div>
13-
</li>
14-
<li>The alt text is automatically saved and can be previewed by inspecting the image properties.</li>
15-
</ol>
16-
17-
<h4 style="font-size: 1.25em; margin: 15px 0;">Resizing Images</h4>
18-
<p style="margin: 10px 0;">To resize an image:</p>
19-
<ol style="margin-left: 20px;">
20-
<li>Select the image to activate the context toolbar.</li>
21-
<li>Use the width and height input fields to specify new dimensions in pixels (e.g., 600px by 400px).</li>
22-
<li>Press <strong>Enter</strong> or click outside the toolbar to apply the changes.</li>
23-
<li>The image will automatically adjust in the document. For optimal performance, use the Uploadcare <code>/resize/</code> transformation:
24-
<div style="margin: 15px 0; padding: 10px 15px; border-left: 4px solid #3498db; background-color: #f0f7fb;">
25-
<code>https://ucarecdn.com/<YOUR_IMAGE_UUID>/-/resize/600x400/</code>
26-
</div>
27-
</li>
28-
</ol>
29-
30-
<h4 style="font-size: 1.25em; margin: 15px 0;">Adjusting Image Saturation and Exposure</h4>
31-
<p style="margin: 10px 0;">To modify image saturation or exposure:</p>
32-
<ol style="margin-left: 20px;">
33-
<li>Select the image and open the context toolbar.</li>
34-
<li>Use the <strong>Saturation</strong> or <strong>Exposure</strong> sliders to adjust the values:
35-
<ul style="margin-left: 20px;">
36-
<li>Increase saturation for more vibrant colors.</li>
37-
<li>Decrease exposure for a darker image or increase it for a brighter image.</li>
38-
</ul>
39-
</li>
40-
<li>Changes are applied dynamically. To reset, click the <strong>Reset</strong> button in the toolbar.</li>
41-
<li>Example transformation for saturation:
42-
<div style="margin: 15px 0; padding: 10px 15px; border-left: 4px solid #3498db; background-color: #f0f7fb;">
43-
<code>https://ucarecdn.com/<YOUR_IMAGE_UUID>/-/saturation/120%/</code>
44-
</div>
45-
</li>
46-
</ol>
47-
48-
<h4 style="font-size: 1.25em; margin: 15px 0;">Cropping an Image</h4>
49-
<p style="margin: 10px 0;">To crop an image:</p>
50-
<ol style="margin-left: 20px;">
51-
<li>Select the image to activate the context toolbar.</li>
52-
<li>Click the <strong>Crop</strong> button to enter cropping mode.</li>
53-
<li>Adjust the cropping handles or specify exact dimensions.</li>
54-
<li>Click <strong>Apply</strong> to save the cropped image. Example transformation for cropping:
55-
<div style="margin: 15px 0; padding: 10px 15px; border-left: 4px solid #3498db; background-color: #f0f7fb;">
56-
<code>https://ucarecdn.com/<YOUR_IMAGE_UUID>/-/crop/400x400/</code>
57-
</div>
58-
</li>
59-
</ol>
60-
61-
<h4 style="font-size: 1.25em; margin: 15px 0;">Restoring Default Settings</h4>
62-
<p style="margin: 10px 0;">To reset an image to its original state:</p>
63-
<ol style="margin-left: 20px;">
64-
<li>Click the <strong>Reset</strong> button in the context toolbar.</li>
65-
<li>The image will revert to its original dimensions and appearance.</li>
66-
<li>All transformations (e.g., cropping, resizing, or adjustments) will be removed.</li>
67-
</ol>
68-
69-
<div style="margin: 15px 0; padding: 10px 15px; border-left: 4px solid #e74c3c; background-color: #fdf7f7;">
70-
<p><strong>Important:</strong> Always use descriptive alt text for accessibility and optimize image dimensions for better performance.</p>
71-
</div>
2+
<h1>Image Optimizer Powered by Uploadcare (Demo)</h3>
723
</textarea>

‎modules/ROOT/examples/live-demos/uploadcare/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
tinymce.init({
22
selector: 'textarea#uploadcare',
33
plugins: 'uploadcare',
4-
uploadcare_public_key: 'your_public_key',
54
toolbar: 'uploadcare',
5+
uploadcare_public_key: 'your_public_key',
66
});

‎modules/ROOT/pages/uploadcare.adoc‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,14 @@ include::partial$misc/admon-requires-7.6v.adoc[]
1313

1414
== Overview
1515

16-
The plugin leverages Uploadcare's robust API for image optimization, providing features such as automatic resizing, format conversion, and compression. It's ideal for developers looking to improve website performance and streamline image handling inside {productname}.
16+
The **Image Optimizer** plugin leverages a suite of powerful features for hosting, serving and edit images like responsive image delivery, automatic image file format selection, automatic compression and non-destructive image transformations and adjustments, all powered by link:https://uploadcare.com[Uploadcare].
1717

18-
== Key Benefits
18+
== Key benefits
1919

20-
* Speed up your site with responsive images, adaptive quality, and automatic formatting.
21-
* Get faster loading times, save on bandwidth, and give users a seamless experience.
22-
* Ditch the editing software! Our improved editing functionality lets you tweak images right in the editor—no extra tools needed. Less fuss, more fun.
23-
* Stay safe and compliant with built-in unsafe content detection, malware protection, and adherence to SOC2, and GDPR standards.
24-
25-
[NOTE]
26-
**Image Optimizer** is currently only available for cloud or self-hosted customers via our sales-assisted channel. It will be available to self-service customers in early 2025.
20+
* Improve page loading speed and save on bandwidth by serving images in the optimal size, format, and compression based on the visitor's browser and device.
21+
* Ditch the image editor and adjust images right inside {productname} with non-destructive transformations and adjustments. Change your mind any time!
22+
* Stay safe and compliant with secure uploads, built in malware protection, and unsafe content detection
23+
* Enterprise-ready scalable cloud storage provided by Uploadcare, delivered through its lightning-fast global CDN, and compliant with SOC2 and GDPR standards.
2724

2825
== Interactive example
2926

@@ -42,6 +39,10 @@ tinymce.init({
4239
plugins: 'uploadcare',
4340
toolbar: 'uploadcare',
4441
uploadcare_public_key: '<your-public-key>',
42+
// uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({
43+
// signature: 'sig',
44+
// expire: 123
45+
// }), // Recommended option for secure uploads
4546
});
4647
----
4748

@@ -56,7 +57,7 @@ Below is an overview of the features of the {pluginname} plugin includes for ima
5657
| Align
5758
|
5859
| image:icons/align-left.svg[align-left.svg]
59-
| Provides alignment options for the image or element:
60+
| Provides alignment options for the image or element.
6061

6162
|
6263
| Align Left
@@ -173,13 +174,6 @@ Below is an overview of the features of the {pluginname} plugin includes for ima
173174
| image:icons/blur.svg[blur.svg]
174175
| Blurs the image.
175176

176-
// Waiting on confirmation- missing from ui.
177-
// |
178-
// |
179-
// | Enhance
180-
// | image:icons/image-enhancements.svg[image-enhancements.svg]
181-
// | Enhances the image automatically.
182-
183177
| Revert Changes
184178
|
185179
| image:icons/revert-changes.svg[revert-changes.svg]
@@ -195,21 +189,3 @@ include::partial$configuration/{plugincode}.adoc[leveloffset=+1]
195189
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[leveloffset=+1]
196190

197191
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[leveloffset=+1]
198-
199-
== Commands
200-
201-
The {pluginname} plugin provides the following {productname} commands.
202-
203-
// include::partial$commands/{plugincode}-cmds.adoc[]
204-
205-
== Events
206-
207-
The {pluginname} plugin provides the following events.
208-
209-
// include::partial$events/{plugincode}-events.adoc[]
210-
211-
== APIs
212-
213-
The {pluginname} plugin provides the following APIs.
214-
215-
// include::partial$plugin-apis/{plugincode}-apis.adoc[]

‎modules/ROOT/partials/configuration/uploadcare.adoc‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
[[uploadcare-cdn-base-url]]
2-
== `uploadcare_cdn_base_url`
1+
[[uploadcare-public-key]]
2+
== `uploadcare_public_key`
33

4-
Specifies the domain used for the Uploadcare service. This domain determines where your files are uploaded and accessed. By default, the plugin uses the Uploadcare CDN `ucarecdn.com` to host and deliver your files. If you use a custom domain, update this option to match your configuration.
4+
Defines the public API key required to authenticate and interact with the Uploadcare API. This key identifies your account and ensures that uploads and operations are associated with your project. Without setting this key, the Uploadcare integration will not function.
55

6-
*Type:* `+String+`
6+
[IMPORTANT]
7+
This option is mandatory for using Uploadcare.
78

8-
*Default:* `+ucarecdn.com+`
9+
*Type:* `+String+`
910

1011
[source,js]
1112
----
@@ -14,19 +15,19 @@ tinymce.init({
1415
plugins: 'uploadcare',
1516
toolbar: 'uploadcare',
1617
uploadcare_public_key: '<your-public-key>',
17-
uploadcare_cdn_base_url: 'ucarecdn.com',
1818
});
1919
----
2020

21-
[[uploadcare-public-key]]
22-
== `uploadcare_public_key`
21+
[[uploadcare-signed-upload-auth-provider]]
22+
== `uploadcare_signed_upload_auth_provider`
2323

24-
Defines the public API key required to authenticate and interact with the Uploadcare API. This key identifies your account and ensures that uploads and operations are associated with your project. Without setting this key, the Uploadcare integration will not function.
24+
Specifies a function used to generate secure signatures for authenticated requests to Uploadcare. This is necessary when using secure Uploadcare features, such as signed uploads. The function should return a `Promise` that resolves with an object containing the signature and expiration timestamp.
2525

26-
[IMPORTANT]
27-
This option is mandatory for using Uploadcare.
26+
Use this option if you want to ensure secure uploads or restrict file access using Uploadcare's signed uploads feature.
2827

29-
*Type:* `+String+`
28+
*Type:* `+Function+`
29+
30+
=== Example: Setting `uploadcare_signed_upload_auth_provider`
3031

3132
[source,js]
3233
----
@@ -35,28 +36,42 @@ tinymce.init({
3536
plugins: 'uploadcare',
3637
toolbar: 'uploadcare',
3738
uploadcare_public_key: '<your-public-key>',
39+
uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({
40+
signature: 'sig',
41+
expire: 123
42+
}),
3843
});
3944
----
4045

41-
[[uploadcare-signature-provider]]
42-
== `uploadcare_signature_provider`
46+
[IMPORTANT]
47+
====
48+
{companyname} recommends configuring the `uploadcare_signed_upload_auth_provider` option to enable signed uploads and enhance security when integrating with Uploadcare. This option is essential for applications requiring:
4349
44-
Specifies a function used to generate secure signatures for authenticated requests to Uploadcare. This is necessary when using secure Uploadcare features, such as signed uploads or private storage. The function should return a `Promise` that resolves with an object containing the signature and expiration timestamp.
50+
* Secure file uploads by preventing unauthorized access.
51+
* Restriction of file access to specific users or sessions.
4552
46-
Use this option if you want to ensure secure uploads or restrict file access using Uploadcare's signed uploads feature.
53+
The `uploadcare_signed_upload_auth_provider` ensures that every request is authenticated with a generated signature and expiration timestamp, providing an additional layer of security for sensitive data.
4754
48-
*Type:* `+Function+`
55+
Using this option will help safeguard your application by ensuring secure file uploads, protecting sensitive data, and maintaining system integrity. {companyname} strongly advises including this configuration as a fundamental part of your Uploadcare integration setup.
56+
====
4957

50-
=== Example: Setting `uploadcare_signature_provider`
58+
[[uploadcare-cdn-base-url]]
59+
== `uploadcare_cdn_base_url`
60+
61+
Specifies the domain used for the Uploadcare service. This domain determines where your files are uploaded and accessed. By default, the plugin uses the Uploadcare CDN `ucarecdn.com` to host and deliver your files. If you use a custom domain, update this option to match your configuration.
62+
63+
*Type:* `+String+`
64+
65+
*Default:* `+ucarecdn.com+`
5166

5267
[source,js]
5368
----
5469
tinymce.init({
55-
selector: 'textarea',
70+
selector: "textarea",
5671
plugins: 'uploadcare',
5772
toolbar: 'uploadcare',
5873
uploadcare_public_key: '<your-public-key>',
59-
uploadcare_signature_provider: (_publicKey) => Promise.resolve({ signature: 'sig', expire: 123 }),
74+
uploadcare_cdn_base_url: 'ucarecdn.com',
6075
});
6176
----
6277

0 commit comments

Comments
 (0)