diff --git a/.api-version b/.api-version index c29b3b5dd8..88dee361c3 100644 --- a/.api-version +++ b/.api-version @@ -1 +1 @@ -8.1.2 \ No newline at end of file +8.2.0 \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/suggestededits-auto-approve/index.html b/modules/ROOT/examples/live-demos/suggestededits-auto-approve/index.html new file mode 100644 index 0000000000..9cb33f1b32 --- /dev/null +++ b/modules/ROOT/examples/live-demos/suggestededits-auto-approve/index.html @@ -0,0 +1,44 @@ + diff --git a/modules/ROOT/examples/live-demos/suggestededits-auto-approve/index.js b/modules/ROOT/examples/live-demos/suggestededits-auto-approve/index.js new file mode 100644 index 0000000000..fb93a40d34 --- /dev/null +++ b/modules/ROOT/examples/live-demos/suggestededits-auto-approve/index.js @@ -0,0 +1,24 @@ +const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users'; + +const tinymceElement = document.querySelector('textarea#suggestededits-auto-approve'); +const model = JSON.parse(tinymceElement.getAttribute('suggestededits-model')); + +tinymce.init({ + selector: 'textarea#suggestededits-auto-approve', + height: 500, + plugins: 'suggestededits advlist anchor autolink code charmap emoticons fullscreen help image link lists media preview searchreplace table', + toolbar: 'undo redo | suggestededits | styles fontsizeinput | bold italic | align bullist numlist | table link image | code', + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }', + + suggestededits_model: model, + suggestededits_access: 'full', + suggestededits_content: 'html', + suggestededits_auto_approve: true, + + user_id: 'kai-nakamura', + fetch_users: (userIds) => Promise.all(userIds + .map((userId) => + fetch(`${API_URL}/${userId}`) + .then((response) => response.json()) + .catch(() => ({ id: userId })))), +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js new file mode 100644 index 0000000000..7f34993e1c --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js @@ -0,0 +1,47 @@ +tinymce.init({ + selector: "textarea#uploadcare-full-feature", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + uploadcare_filters: [ + { name: 'none' }, // No filter applied + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' + { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' + { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' + { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' + { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + ], + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + poster: 'https://placehold.co/600x400', + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { display: block; margin: 1rem 0; } + ` +}); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html new file mode 100644 index 0000000000..49975197ab --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js new file mode 100644 index 0000000000..90d9ce8549 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -0,0 +1,46 @@ +tinymce.init({ + selector: "textarea#uploadcare-full-feature", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', + uploadcare_filters: [ + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris with inverted effect (amount -100), label reads 'Vintage' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'galen', amount: 80, label: 'Soft' }, // Galen with softening effect (amount 80), label reads 'Soft' + { name: 'carris', amount: 120, label: 'Sharp' }, // Carris with high contrast (amount 120), label reads 'Sharp' + { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night' + { name: 'none' }, // No filter applied + ], + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + // poster: 'https://placehold.co/600x400', // Optional poster image URL + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { display: block; margin: 1rem 0; } + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare-image/example.js b/modules/ROOT/examples/live-demos/uploadcare-image/example.js new file mode 100644 index 0000000000..7b341b467a --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-image/example.js @@ -0,0 +1,34 @@ +tinymce.init({ + selector: "textarea#uploadcare-image", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + uploadcare_filters: [ + { name: 'none' }, // No filter applied + { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' + { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' + { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' + { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' + { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' + { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' + { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' + { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' + { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' + { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + ], + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + ` + }); diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.html b/modules/ROOT/examples/live-demos/uploadcare-image/index.html similarity index 99% rename from modules/ROOT/examples/live-demos/uploadcare/index.html rename to modules/ROOT/examples/live-demos/uploadcare-image/index.html index 6fb2c2d2e2..94c511d821 100644 --- a/modules/ROOT/examples/live-demos/uploadcare/index.html +++ b/modules/ROOT/examples/live-demos/uploadcare-image/index.html @@ -1,17 +1,23 @@ - \ No newline at end of file + diff --git a/modules/ROOT/examples/live-demos/uploadcare/index.js b/modules/ROOT/examples/live-demos/uploadcare-image/index.js similarity index 91% rename from modules/ROOT/examples/live-demos/uploadcare/index.js rename to modules/ROOT/examples/live-demos/uploadcare-image/index.js index 40d7018930..bfd47021ff 100644 --- a/modules/ROOT/examples/live-demos/uploadcare/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-image/index.js @@ -1,5 +1,5 @@ tinymce.init({ - selector: "textarea", + selector: "textarea#uploadcare-image", plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '630992ad50fe2291c406', uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', @@ -16,7 +16,7 @@ tinymce.init({ { name: 'none' }, // No filter applied ], a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", + toolbar: "undo redo | uploadcare | styles | bold italic underline | forecolor | bullist numlist| link | code preview", height: 700, content_style: ` body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/example.js b/modules/ROOT/examples/live-demos/uploadcare-video/example.js new file mode 100644 index 0000000000..2a9bad1c1f --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/example.js @@ -0,0 +1,38 @@ +tinymce.init({ + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + // poster: 'https://placehold.co/600x400', // Optional poster image URL + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { + display: block; + margin: 1rem 0; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + ` + }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.html b/modules/ROOT/examples/live-demos/uploadcare-video/index.html new file mode 100644 index 0000000000..6a82b95a54 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.html @@ -0,0 +1,34 @@ + diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js new file mode 100644 index 0000000000..ee7d6aea71 --- /dev/null +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -0,0 +1,40 @@ +tinymce.init({ + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + // poster: 'https://placehold.co/600x400', // Optional poster image URL + width: 640, + height: 360, + showLogo: false + }, + a11y_advanced_options: true, + toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { + display: block; + margin: 1rem 0; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare/example.js b/modules/ROOT/examples/live-demos/uploadcare/example.js deleted file mode 100644 index 38bcb9f27a..0000000000 --- a/modules/ROOT/examples/live-demos/uploadcare/example.js +++ /dev/null @@ -1,34 +0,0 @@ -tinymce.init({ - selector: "textarea", - plugins: [ "uploadcare", "code", "link", "preview", "lists" ], - uploadcare_public_key: '', - uploadcare_filters: [ - { name: 'none' }, // No filter applied - { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' - { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' - { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' - { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' - { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' - { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' - { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' - { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' - { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' - { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' - { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' - ], - a11y_advanced_options: true, - toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview", - height: 700, - content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } - h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } - h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } - p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } - p { line-height: 1.6; margin: 0; } - p + p { margin-top: 1rem; } - a { color: #2b70e3; } - blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } - figcaption {font-size: 0.875em;} - ` - }); \ No newline at end of file diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 170cc0bd90..1e899f2647 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -328,7 +328,9 @@ ***** xref:import-from-word-with-jwt-authentication-nodejs.adoc[Node.js] ***** xref:import-from-word-with-jwt-authentication-php.adoc[PHP] *** xref:editimage.adoc[Image Editing] -*** xref:uploadcare.adoc[Image Optimizer Powered by Uploadcare] +*** xref:uploadcare.adoc[Media Optimizer] +**** xref:uploadcare-image.adoc[Image] +**** xref:uploadcare-video.adoc[Video] *** xref:inline-css.adoc[Inline CSS] *** xref:linkchecker.adoc[Link Checker] *** xref:math.adoc[Math] @@ -419,6 +421,11 @@ ** xref:tinymce-and-cors.adoc[Cross-Origin Resource Sharing (CORS)] * Release information ** xref:release-notes.adoc[Release notes for {productname}] +*** {productname} 8.2.0 +**** xref:8.2.0-release-notes.adoc#overview[Overview] +**** xref:8.2.0-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium Plugin changes] +**** xref:8.2.0-release-notes.adoc#improvements[Improvements] +**** xref:8.2.0-release-notes.adoc#bug-fixes[Bug fixes] *** {productname} 8.1.2 **** xref:8.1.2-release-notes.adoc#overview[Overview] **** xref:8.1.2-release-notes.adoc#bug-fix[Bug fix] diff --git a/modules/ROOT/pages/8.1.0-release-notes.adoc b/modules/ROOT/pages/8.1.0-release-notes.adoc index 842703e846..607d9a2fcc 100644 --- a/modules/ROOT/pages/8.1.0-release-notes.adoc +++ b/modules/ROOT/pages/8.1.0-release-notes.adoc @@ -55,19 +55,19 @@ To resolve this, {productname} now inserts a temporary hidden element before the For information on the **Spell Checker** plugin, see: xref:introduction-to-tiny-spellchecker.adoc[Spell Checker]. -=== Image Optimizer (Powered by Uploadcare) +=== Media Optimizer (Powered by Uploadcare) -The {productname} {release-version} release includes an accompanying release of the **Image Optimizer (Powered by Uploadcare)** premium plugin. +The {productname} {release-version} release includes an accompanying release of the **Media Optimizer (Powered by Uploadcare)** premium plugin. -**Image Optimizer (Powered by Uploadcare)** includes the following fix. +**Media Optimizer (Powered by Uploadcare)** includes the following fix. ==== Image previews sometimes showed the wrong image from a `srcset`. -In previous versions of the Image Optimizer premium plugin, an issue where image effects were applied based on the main `src` instead of the active `srcset` URL, caused discrepancies when the displayed image was selected from `srcset`. This led to a mismatch in the adjustment preview (rendered from the main `src`) versus the image shown in the editor (rendered from the `srcset` URL), resulting in different visual outcomes for effects such as blur or resize. +In previous versions of the Media Optimizer premium plugin, an issue where image effects were applied based on the main `src` instead of the active `srcset` URL, caused discrepancies when the displayed image was selected from `srcset`. This led to a mismatch in the adjustment preview (rendered from the main `src`) versus the image shown in the editor (rendered from the `srcset` URL), resulting in different visual outcomes for effects such as blur or resize. {productname} {release-version} resolves this issue by using the `currentSrc` property to generate previews, ensuring the preview and the editor image reference the same resource. As a result, the preview image and the image in the editor are now consistent. -For information on the **Image Optimizer Powered by Uploadcare** plugin, see: xref:uploadcare.adoc[Image Optimizer (Powered by Uploadcare)]. +For information on the **Media Optimizer Powered by Uploadcare** plugin, see: xref:uploadcare.adoc[Media Optimizer (Powered by Uploadcare)]. === Accessibility Checker diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc new file mode 100644 index 0000000000..5414068491 --- /dev/null +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -0,0 +1,213 @@ += {productname} 8.2.0 +:release-version: 8.2.0 +:navtitle: {productname} 8.2.0 +:description: Release notes for {productname} 8.2.0 +:keywords: releasenotes, new, changes, bugfixes +:page-toclevels: 1 + +include::partial$misc/admon-releasenotes-for-stable.adoc[] + + +[[overview]] +== Overview + +{productname} {release-version} was released for {enterpriseversion} and {cloudname} on Wednesday, October 22^nd^, 2025. These release notes provide an overview of the changes for {productname} {release-version}, including: + +* xref:accompanying-premium-plugin-changes[Accompanying Premium plugin changes] +* xref:improvements[Improvements] +* xref:bug-fixes[Bug fixes] + + +[[accompanying-premium-plugin-changes]] +== Accompanying Premium plugin changes + +The following premium plugin updates were released alongside {productname} 8.2.0. + +=== Media Optimizer + +The {productname} 8.2.0 release includes an accompanying release of the **Media Optimizer** premium plugin. + +**Media Optimizer** now includes comprehensive video handling capabilities. + +==== Video Upload Support + +The **Media Optimizer** plugin now supports video upload and processing, extending beyond its previous image-only functionality. Users can now upload videos directly within the editor through drag-and-drop, file selection, or URL input. + +The plugin now supports commonly available video formats including MP4, WebM, 3GPP, MPEG variants, QuickTime, Matroska, AVI, Flash Video, RealMedia, and other standard video formats. + +This new functionality is supported with the following configuration options: + +* **`uploadcare_video_properties`**: Comprehensive video player configuration including autoplay, controls, loop and more. +* **`uploadcare_video_resize`**: Option to control whether videos can be resized directly within the editor. + +For information on the **Media Optimizer** plugin, see: xref:uploadcare-video.adoc[Media Optimizer: Video]. + +=== Empty captions for floating images were not rendered correctly. +// #TINY-12592 + +In previous versions of **Media Optimizer**, when figures were styled with `+display: table+`, a floated `++` could cause an empty `+
+` to render incorrectly alongside the image instead of below it. Deleting the caption text further disrupted the layout, causing the caption area to shift or disappear entirely. + +In {productname} {release-version}, this issue has been resolved by applying `+clear: both+` to `+
+` elements when the associated image is floated. This ensures captions always render below the image, even when empty, maintaining proper alignment and consistent visual structure. + +For information on the **Media Optimizer** plugin, see: xref:uploadcare.adoc[Media Optimizer]. + +=== License Key Manager + +The {productname} 8.2.0 release includes an accompanying release of the **License Key Manager**. + +==== New `+js/commerciallicensekeymanager.js+` file to lazyload majority of plugin after editor init. +// #TINY-12820 + +The **License Key Manager** has been reworked to include a new `+js/commerciallicensekeymanager.js+` file that is lazy-loaded when required. This change reduces the initialization time of the editor and time to first render. + +For information on the **License Key Manager** plugin, see: xref:license-key.adoc[License Key Manager]. + +=== Templates + +The {productname} {release-version} release includes an accompanying release of the **Templates** premium plugin. + +**Templates** includes the following fix. + +==== Pressing enter while focused on title input during category or template creation would submit even when the submit button was disabled +// #TINY-12730 + +Previously, pressing **Enter** while focused on the title input during category or template creation would trigger form submission, even when the submit button was disabled. This occurred because the input handling logic did not validate the form state before submission. As a result, users could inadvertently attempt to create a category or template with an empty name, causing an error. + +{productname} {release-version} addresses this issue by updating the input handling logic to check the form's validity before allowing submission when **Enter** is pressed. Now, if the form is invalid or the submit button is disabled, pressing **Enter** will not trigger submission, preventing erroneous attempts to create categories or templates with empty names. + +=== Suggested Edits + +The {productname} {release-version} release includes an accompanying release of the **Suggested Edits** premium plugin. + +**Suggested Edits** includes the following improvements. + +==== Added new `+suggestededits_auto_approve+` option to auto-approve edits by the current user +// #TINY-12258 + +A new `suggestededits_auto_approve` option has been added to the **Suggested Edits** plugin. This option allows automatic approval of edits made by the current user, as defined by the xref:suggestededits.adoc#user_id[`+user_id+`] setting, without requiring manual review. When enabled, any new edits and previously suggested changes from the same user are instantly approved and applied, streamlining workflows where review is unnecessary. + +For more information on the `+suggestededits_auto_approve+` option, see: xref:suggestededits.adoc#suggestededits_auto_approve[suggestededits_auto_approve]. + +=== Suggestions now display the type of content that was changed +// #TINY-12598 + +Previously, the **Suggested Edits** plugin only displayed the word "content" in the suggestion card description, as a generalised context for each suggestion. + +In {release-version}, the **Suggested Edits** plugin displays the type of content as well as the type of edit in the card description, to provide more context for each suggestion. + +For information on the **Suggested Edits** plugin, see: xref:suggestededits.adoc[Suggested Edits]. + +=== Full Page HTML + +The {productname} {release-version} release includes an accompanying release of the **Full Page HTML** premium plugin. + +**Full Page HTML** includes the following fix. + +=== Encoding provided in the charset meta attribute would not be detected +// #TINY-12860 + +The previous encoding detection logic did not recognize certain encodings defined using the charset `+meta+` attribute, which resulted in inconsistent or conflicting encodings within a single page and caused display or editing issues. + +{productname} {release-version} addresses this issue by adding support for the new encoding type, ensuring that both the original and new encoding formats are correctly detected and processed. As a result, pages using either encoding style are now handled consistently. When encoded content is edited, the output is normalized to the previously supported encoding format, ensuring consistent markup and preventing confusion that could occur if the original encoding style were retained. + +=== Head element added to the same line as the `meta` element +// #TINY-12859 + +Previously, the `+meta+` property within the Full Page HTML plugin was not properly treated as a block-level element. This caused the `++` element to be appended directly to the same line as the `+meta+` tag, leading to formatting inconsistencies in the generated HTML output. + +In {release-version}, the `+meta+` property has been updated to behave as a block element, ensuring proper separation and newline handling within the `` section. + +For information on the **Full Page HTML** plugin, see: xref:fullpagehtml.adoc[Full Page HTML]. + + +[[improvements]] +== Improvements + +{productname} 8.2.0 also includes the following improvement: + +=== Some elements would be given an extra newline by the serializer when indented +// #TINY-12857 + +Previously, certain elements received an additional newline when indented due to the title not being correctly recognized as a block by the DOM Parser serializer. This caused unwanted whitespace to appear in the output. The issue was resolved by explicitly marking the title as a block within the code, ensuring that serialization no longer introduces unnecessary whitespace. + +[[bug-fixes]] +== Bug fixes + +{productname} 8.2.0 also includes the following bug fixes: + +=== UI elements like focus outlines and placeholders would be visible after printing +// TINY-12584 + +Previously, UI elements such as focus outlines and placeholder text were rendered in printed versions of the editor content, resulting in unwanted visual artifacts in printed documents. This behavior caused confusion and reduced the professional appearance of printed materials. To address this issue, printing-specific styles were introduced to automatically hide all UI-related elements within the editor content during printing. As a result, printed output now includes only the intended content, ensuring clean and consistent presentation across all printouts. + +=== The `open` attribute on `
` elements is now normalized to `open="open"` when the accordion plugin is enabled. +// #TINY-12862 + +Previously, the `open` attribute on `
` elements was inconsistently defined when used with the accordion plugin. In some cases, the attribute appeared as `+open="true"+`, while toggling through the plugin converted it to `+open="open"+`. This inconsistency caused issues when loading externally created content that contained multiple open accordions with different attribute values, leading to mismatched accordion states. + +In {productname} {release-version}, the behavior has been standardized: when the accordion plugin is enabled, the `open` attribute is normalized to `+open="open"+` on content load. + +=== Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered +// #TINY-12289 + +Previously, button tooltips were not always dismissed correctly when icons were updated, because the element handling hover events was being replaced and the `mouseout` event never fired. This caused tooltips to remain visible after clicking a button, creating a confusing UI experience. + +{productname} {release-version} addresses this issue by adjusting the icon rendering logic so hover and tooltip behavior are attached to the button itself rather than the icon element. As a result, when the `setIcon` API updates icons, it no longer interferes with mouse events. + +=== The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame +// #TINY-12626 + +A legacy workaround for a Chromium bug caused the page to scroll to the center of the editor when the editor gained focus while its top edge was outside the viewport; although unrelated, features like autoresize could frequently trigger this behavior and resulted in unexpected scrolling in some situations. + +As of {productname} {release-version}, the workaround has been removed now that the underlying Chromium issue has been fixed, allowing the browser to manage scrolling natively. + +=== Some UI elements related to dragging elements were not properly filtered out when fetching content +// #TINY-12384 + +In {productname} {release-version}, an issue was resolved where elements used by the table resize feature were not flagged for removal by the serializer. When content was fetched via a `+getContent()+` call during an active table resize, these transient UI nodes could be included in the returned HTML, leading to extraneous markup and potentially corrupted data. + +The fix marks these elements with bogus attributes so the serializer reliably filters them out, ensuring clean, stable content retrieval and preventing unintended artifacts in saved or processed output. + +=== The cursor could get stuck around an absolutely positioned CEF element when navigating using arrow keys +// #TINY-10306 + +Previously, when using arrow keys to navigate content containing absolutely positioned non-editable elements, the cursor could become trapped near these elements. This issue disrupted caret movement and made it difficult for users to continue navigating around the editor's content. + +In {productname} {release-version}, the horizontal caret navigation logic has been updated to ensure that the caret movement is no longer disrupted when navigating around absolutely positioned elements. + +=== The schema will now allow the `property` RDFa attribute on `meta` elements +// #TINY-12858 + +Previously, the schema did not recognize the `property` RDFa attribute as valid for `meta` elements, causing it to be removed during content validation in features such as the {productname} `fullpagehtml` premium plugin. This behavior could strip essential metadata used for social media previews or structured data integrations, and required integrators to manually whitelist the attribute to retain it. + +In {release-version}, the schema has been updated to include `property` as a valid attribute for `meta` elements. This change ensures compatibility with common metadata standards. + +=== Corrected type of `undoManager.add` method. The `event` parameter is type `EditorEvent` not `Event`. +// #TINY-12936 + +The `undoManager.add` method previously defined its `event` parameter as type `Event`, leading to inaccurate type inference and reduced developer clarity. This issue caused incomplete type validation and limited IDE assistance when working with `undo()` events. + +{productname} {release-version} addresses this issue by updating the `undoManager.add` method to use the `EditorEvent` type for the `event` parameter, ensuring consistency with other {productname} APIs. + +For more information on the `undoManager.add` method, see: xref:apis/tinymce.undomanager.adoc#add[undoManager.add()]. + +=== Chromium browsers would in certain situations scroll the editor unexpectedly when dragging content over the editor. +// #INT-3373 + +Previously, in Chromium-based browsers starting with Chrome 141 (and some builds of 140), focusing the editor during a `dragover` event could trigger the browser's scroll-to-caret behavior. Because the caret initially sat at the start of the document, pages could jump to the top as users dragged content over the editor, disrupting drag-and-drop workflows. + +In {productname} {release-version}, dragover handling has been updated to move the caret to the intended drop position before the editor receives focus. This ensures Chrome's scroll-to-caret check finds the caret already in view, preventing unexpected scrolling and maintaining a smooth drag-and-drop experience. + +=== Added support for loading web components into iframes +// #TINY-13006 + +Previously, there was no method to load web components into the editor iframe or preview iframes used by other plugins, which prevented these components from rendering correctly. This limitation impacted users who relied on custom web components for extended editor functionality or content visualization. In {release-version}, a new API link:https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.schema/#getComponentUrls[getComponentUrls] has been introduced that allows specifying a script URL for the web component within the custom element schema. This enhancement enables web components to be properly registered and rendered within the {productname} editor environment. + +For an example of using custom elements with block-level and inline-level components, see: xref:content-filtering.adoc#example-using-custom_elements-with-block-level-and-inline-level-components[Example using `+custom_elements+` with block-level and inline-level components]. + +=== Addressed split buttons rendering narrower than in TinyMCE 7, ensuring consistent sizing across the toolbar +// #TINY-13097 && #TINY-13111 + +In {productname} {release-version}, an issue was resolved where split buttons rendered narrower than in {productname} 7 and other toolbar buttons. This occurred because the main portion of the split button used a CSS rule that caused it to collapse to the icon size during initialization, resulting in an incorrect fixed width. This made split buttons appear visually inconsistent, reduced their clickability, and could cause text labels to be truncated. + +{productname} {release-version} addresses this issue by adjusting the width behavior to inherit the correct `34px` for icons and auto for text—ensuring consistent sizing across the toolbar. \ No newline at end of file diff --git a/modules/ROOT/pages/apis/tinymce.dom.scriptloader.adoc b/modules/ROOT/pages/apis/tinymce.dom.scriptloader.adoc index 96784f9b82..7f6e559cf1 100644 --- a/modules/ROOT/pages/apis/tinymce.dom.scriptloader.adoc +++ b/modules/ROOT/pages/apis/tinymce.dom.scriptloader.adoc @@ -1,7 +1,7 @@ = tinymce.dom.ScriptLoader :navtitle: tinymce.dom.ScriptLoader :description: This class handles asynchronous/synchronous loading of JavaScript files it will execute callbacks when various items gets loaded. This class is useful to load external JavaScript files. -:keywords: add, isDone, loadQueue, loadScript, loadScripts, markDone +:keywords: add, getScriptAttributes, isDone, loadQueue, loadScript, loadScripts, markDone :moxie-type: api This class handles asynchronous/synchronous loading of JavaScript files it will execute callbacks when various items gets loaded. This class is useful to load external JavaScript files. @@ -37,6 +37,7 @@ scriptLoader.loadQueue().then(() => { |=== |Name|Summary|Defined by |xref:#add[add()]|Adds a specific script to the load queue of the script loader.|`xref:apis/tinymce.dom.scriptloader.adoc[ScriptLoader]` +|xref:#getScriptAttributes[getScriptAttributes()]|Returns the attributes that should be added to a script tag when loading the specified URL.|`xref:apis/tinymce.dom.scriptloader.adoc[ScriptLoader]` |xref:#isDone[isDone()]|Returns true/false if a script has been loaded or not.|`xref:apis/tinymce.dom.scriptloader.adoc[ScriptLoader]` |xref:#loadQueue[loadQueue()]|Starts the loading of the queue.|`xref:apis/tinymce.dom.scriptloader.adoc[ScriptLoader]` |xref:#loadScript[loadScript()]|Loads a specific script directly without adding it to the load queue.|`xref:apis/tinymce.dom.scriptloader.adoc[ScriptLoader]` @@ -67,6 +68,24 @@ Adds a specific script to the load queue of the script loader. ''' +[[getScriptAttributes]] +=== getScriptAttributes() +[source, javascript] +---- +getScriptAttributes(url: String): Object +---- +Returns the attributes that should be added to a script tag when loading the specified URL. + +==== Parameters + +* `url (String)` - Url to get attributes for. + +==== Return value + +* `Object` - Object with attributes to add to the script tag. + +''' + [[isDone]] === isDone() [source, javascript] diff --git a/modules/ROOT/pages/apis/tinymce.html.schema.adoc b/modules/ROOT/pages/apis/tinymce.html.schema.adoc index f4726d75da..a60bc0eb61 100644 --- a/modules/ROOT/pages/apis/tinymce.html.schema.adoc +++ b/modules/ROOT/pages/apis/tinymce.html.schema.adoc @@ -1,7 +1,7 @@ = tinymce.html.Schema :navtitle: tinymce.html.Schema :description: Schema validator class. -:keywords: addCustomElements, addValidChildren, addValidElements, children, getBlockElements, getBoolAttrs, getCustomElements, getElementRule, getInvalidStyles, getMoveCaretBeforeOnEnterElements, getNonEmptyElements, getSelfClosingElements, getSpecialElements, getTextBlockElements, getTextInlineElements, getTransparentElements, getValidClasses, getValidStyles, getVoidElements, getWhitespaceElements, isValid, isValidChild, setValidElements +:keywords: addCustomElements, addValidChildren, addValidElements, children, getBlockElements, getBoolAttrs, getComponentUrls, getCustomElements, getElementRule, getInvalidStyles, getMoveCaretBeforeOnEnterElements, getNonEmptyElements, getSelfClosingElements, getSpecialElements, getTextBlockElements, getTextInlineElements, getTransparentElements, getValidClasses, getValidStyles, getVoidElements, getWhitespaceElements, isValid, isValidChild, setValidElements :moxie-type: api Schema validator class. @@ -36,6 +36,7 @@ format is for example `element[attr=default{vbar}otherattr]`. Existing rules will be replaced with the ones specified, so this extends the schema.|`xref:apis/tinymce.html.schema.adoc[Schema]` |xref:#getBlockElements[getBlockElements()]|Returns a map with block elements.|`xref:apis/tinymce.html.schema.adoc[Schema]` |xref:#getBoolAttrs[getBoolAttrs()]|Returns a map with boolean attributes.|`xref:apis/tinymce.html.schema.adoc[Schema]` +|xref:#getComponentUrls[getComponentUrls()]|Returns an object of all custom elements that have component URLs.|`xref:apis/tinymce.html.schema.adoc[Schema]` |xref:#getCustomElements[getCustomElements()]|Returns an map object of all custom elements.|`xref:apis/tinymce.html.schema.adoc[Schema]` |xref:#getElementRule[getElementRule()]|Returns true/false if the specified element is valid or not according to the schema.|`xref:apis/tinymce.html.schema.adoc[Schema]` @@ -141,6 +142,20 @@ Returns a map with boolean attributes. ''' +[[getComponentUrls]] +=== getComponentUrls() +[source, javascript] +---- +getComponentUrls(): Object +---- +Returns an object of all custom elements that have component URLs. + +==== Return value + +* `Object` - Object with where key is the component and the value is the url for that component. + +''' + [[getCustomElements]] === getCustomElements() [source, javascript] diff --git a/modules/ROOT/pages/apis/tinymce.undomanager.adoc b/modules/ROOT/pages/apis/tinymce.undomanager.adoc index 571644a0ca..bff2d57e70 100644 --- a/modules/ROOT/pages/apis/tinymce.undomanager.adoc +++ b/modules/ROOT/pages/apis/tinymce.undomanager.adoc @@ -43,14 +43,14 @@ be ignored. So a translation can include calls to execCommand or editor.insertCo === add() [source, javascript] ---- -add(level: Object, event: DOMEvent): Object +add(level: Object, event: EditorEvent): Object ---- Adds a new undo level/snapshot to the undo list. ==== Parameters * `level (Object)` - Optional undo level object to add. -* `event (DOMEvent)` - Optional event responsible for the creation of the undo level. +* `event (EditorEvent)` - Optional event responsible for the creation of the undo level. ==== Return value diff --git a/modules/ROOT/pages/changelog.adoc b/modules/ROOT/pages/changelog.adoc index 2e800a1f0d..47970d7ee2 100644 --- a/modules/ROOT/pages/changelog.adoc +++ b/modules/ROOT/pages/changelog.adoc @@ -4,6 +4,38 @@ NOTE: This is the {productname} Community version changelog. For information about the latest {cloudname} or {enterpriseversion} Release, see: xref:release-notes.adoc[{productname} Release Notes]. +== xref:8.2.0-release-notes.adoc[8.2.0 - 2025-10-22] + +### Improved +* Some elements would be given an extra newline by the serializer when indented. +// #TINY-12857 + +### Fixed +* UI elements like focus outlines and placeholders would be visible after printing. +// #TINY-12584 +* The `open` attribute on `
` elements is now normalized to `open="open"` when the accordion plugin is enabled. +//#TINY-12862 +* Tooltips on toolbar buttons sometimes remained visible if the button icon was updated while hovered. +// #TINY-12289 +* The editor would upon gaining focus scroll to the center of the editor on some browsers if the top of the editor was out of frame. +// #TINY-12626 +* Some UI elements related to dragging elements were not properly filtered out when fetching content. +// #TINY-12384 +* The cursor could get stuck around an absolute CEF element when navigating using arrow keys. +// #TINY-10526 +* The schema will now allow the `property` RDFa attribute on `meta` elements. +// #TINY-12858 +* Corrected type of `undoManager.add` method. The `event` parameter is type `EditorEvent` not `Event`. +// #TINY-12936 +* Chromium browsers would in certain situations scroll the editor unexpectedly when dragging content over the editor. +// #INT-3373 +* Support for setting component urls for custom elements. +// #TINY-13006 +* Reverted toolbar button width to `auto`. +// #TINY-13097 +* Addressed split buttons rendering narrower than in TinyMCE 7, ensuring consistent sizing across the toolbar. +// #TINY-13111 + == xref:8.1.2-release-notes.adoc[8.1.2 - 2025-09-18] ### Fixed diff --git a/modules/ROOT/pages/license-key.adoc b/modules/ROOT/pages/license-key.adoc index fdb12b916a..8a630e6e10 100644 --- a/modules/ROOT/pages/license-key.adoc +++ b/modules/ROOT/pages/license-key.adoc @@ -316,6 +316,12 @@ a| * Check your internet connection a| * Verify that your API key is valid * Check if your subscription is active * Visit the link:https://support.tiny.cloud[Support Portal] if the issue persists + +| xref:resource-load-error[Resource Load Error] +| The editor is disabled because the {productname} license key could not be validated. +| The editor is disabled because the {productname} license key could not be validated. The {productname} Commercial License Key Manager plugin was unable to load additional required resources. +a| * If bundling, verify that you are using the `licensekeymanager/index.js` file that imports other required resources. +* If hosting, verify that a `js/commerciallicensekeymanager.js` file is also present in the `plugins/licensekeymanager` folder. |=== === Detailed Error Descriptions @@ -360,4 +366,8 @@ A server-side error occurred while validating the API key. The editor will attem ==== Online API Key Error (4xx - Disable) The API key validation failed due to an invalid key or inactive subscription. The editor will be disabled until a valid API key is provided. For API key issues, visit link:https://www.tiny.cloud/my-account[Tiny Cloud Account] or see the "<>" section for clarification. +[[resource-load-error]] +==== Resource Load Error +The TinyMCE Commercial License Key Manager plugin was unable to load additional required resources. This typically occurs when the `js/commerciallicensekeymanager.js` file is missing or not properly configured. For bundled applications, ensure you are using the `licensekeymanager/index.js` file that imports other required resources. For self-hosted installations, verify that a `js/commerciallicensekeymanager.js` file is present in the `plugins/licensekeymanager` folder. See the <> section for implementation details. + For additional assistance, visit our link:https://support.tiny.cloud[Support Portal] or contact your link:https://www.tiny.cloud/my-account[Tiny Cloud Account] manager. diff --git a/modules/ROOT/pages/release-notes.adoc b/modules/ROOT/pages/release-notes.adoc index c9bee69ac7..23f9b0591c 100644 --- a/modules/ROOT/pages/release-notes.adoc +++ b/modules/ROOT/pages/release-notes.adoc @@ -9,6 +9,12 @@ This section lists the releases for {productname} {productmajorversion} and the [cols="1,1"] |=== +a| +[.lead] +xref:8.2.0-release-notes.adoc#overview[{productname} 8.2.0] + +Release notes for {productname} 8.2.0 + a| [.lead] xref:8.1.2-release-notes.adoc#overview[{productname} 8.1.2] diff --git a/modules/ROOT/pages/suggestededits.adoc b/modules/ROOT/pages/suggestededits.adoc index 1d5c8240e7..9d983e4a26 100644 --- a/modules/ROOT/pages/suggestededits.adoc +++ b/modules/ROOT/pages/suggestededits.adoc @@ -55,7 +55,9 @@ Replaced content is represented as both added and removed content, and indicates === Sidebar -Each suggested edit is listed as a card in the sidebar and color coded by the type of change, along with the user who made the suggestion, when the edit was made, and any feedback provided on that suggestion. When selected, each suggestion can be handled in the following ways: +Each suggested edit is listed as a card in the sidebar and color coded by the type of change. Each card shows a contextual description of the content, along with the user who made the suggestion, when the edit was made, and any feedback provided on that suggestion. + +When selected, a suggestion can be handled in the following ways: * Accept: Resolves the suggestion, applying the edit to the document when the review is completed. * Reject: Resolves the suggestion, turning back the edit to the original state. @@ -123,6 +125,8 @@ include::partial$configuration/suggestededits_content.adoc[leveloffset=+1] include::partial$configuration/suggestededits_access.adoc[leveloffset=+1] +include::partial$configuration/suggestededits_auto_approve.adoc[leveloffset=+1] + include::partial$configuration/user_id.adoc[leveloffset=+1] include::partial$configuration/fetch_users.adoc[leveloffset=+1] diff --git a/modules/ROOT/pages/uploadcare-image.adoc b/modules/ROOT/pages/uploadcare-image.adoc new file mode 100644 index 0000000000..2469666e4c --- /dev/null +++ b/modules/ROOT/pages/uploadcare-image.adoc @@ -0,0 +1,219 @@ += Media Optimizer (Image) +:navtitle: Image feature of the Media Optimizer plugin +:description: The Image feature of the Media Optimizer plugin allows you to optimize images in your content. +:description_short: optimize images in your content. +:plugincode: uploadcare +:pluginname: Media Optimizer's Image feature +:keywords: plugin, {plugincode}, image, align, transform, alt text, caption, adjust, filter +:plugincategory: premium + +include::partial$misc/admon-premium-plugin.adoc[] + +== Overview + +The **Image feature of the Media Optimizer plugin** offers a range of powerful features for image hosting, serving, and editing. These include responsive image delivery, automatic image format selection, automatic compression, and non-destructive image transformations and adjustments, all powered by link:https://uploadcare.com[Uploadcare^]. + +== Key benefits + +* 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. +* Ditch the image editor and adjust images right inside {productname} with non-destructive transformations and adjustments. Change your mind any time! +* Stay safe and compliant with secure uploads, built in malware protection, and unsafe content detection +* Enterprise-ready scalable cloud storage provided by Uploadcare, delivered through its lightning-fast global CDN, and compliant with SOC2 and GDPR standards. + +== Interactive example + +liveDemo::uploadcare-image[] + +:includedSection: uploadcarePlugin +include::partial$misc/plugin-compatibility-uploadcare-image.adoc[] +:!includedSection: + +== Basic setup + +To add the {pluginname} plugin to the editor, include `{plugincode}` in the `plugins` option in the editor configuration. + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare', + uploadcare_public_key: '', // Required for Uploadcare integration + // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({ + // signature: 'sig', + // expire: 123 + // }), // Recommended option for secure uploads +}); +---- + +[NOTE] +==== +The {pluginname} plugin overrides the xref:quickbars.adoc[Quickbar] quickimage toolbar item. To ensure a better user experience and to avoid having two image buttons configure `quickbars_insert_toolbar` to omit the `quickimage` toolbar item. +==== + + +== Image Operations + +Below is an overview of the features provided by the {pluginname} plugin for image optimization: + +[cols="1,1,^1,3",options="header"] +|=== +| Feature | Operation | Icon | Description + +| Align +| +| image:icons/align-left.svg[align-left.svg] +| Provides alignment options for the image or element. + +| +| Align Left +| image:icons/align-left.svg[align-left.svg] +| Aligns the image to the left. + +| +| Align Centre +| image:icons/align-center.svg[align-center.svg] +| Centers the image. + +| +| Align Right +| image:icons/align-right.svg[align-right.svg] +| Aligns the image to the right. + +| Transform +| +| image:icons/transform-image.svg[transform-image.svg] +| Allows users to apply transformations to the image: + +| +| Rotate Left +| image:icons/rotate-left.svg[rotate-left.svg] +| Rotates the image counterclockwise (left). + +| +| Rotate Right +| image:icons/rotate-right.svg[rotate-right.svg] +| Rotates the image clockwise (right). + +| +| Flip Vertically +| image:icons/flip-vertically.svg[flip-vertically.svg] +| Flips the image vertically. + +| +| Flip Horizontally +| image:icons/flip-horizontally.svg[flip-horizontally.svg] +| Flips the image horizontally. + +| +| Resize +| image:icons/resize.svg[resize.svg] +| Changes the size of the image. + +| Adjust +| +| image:icons/adjustments.svg[adjustments.svg] +| Provides tools for adjusting image properties: + +| +| Brightness +| image:icons/brightness.svg[brightness.svg] +| Adjusts the image brightness. + +| +| Contrast +| image:icons/contrast.svg[contrast.svg] +| Adjusts the image contrast. + +| +| Exposure +| image:icons/exposure.svg[exposure.svg] +| Adjusts the image exposure. + +| +| Gamma +| image:icons/gamma.svg[gamma.svg] +| Adjusts the image gamma. + +| +| Vibrance +| image:icons/vibrance.svg[vibrance.svg] +| Adjusts the image vibrance. + +| +| Saturation +| image:icons/saturation.svg[saturation.svg] +| Adjusts the image saturation. + +| +| Warmth +| image:icons/warmth.svg[warmth.svg] +| Adjusts the image warmth. + +| +| Grayscale +| image:icons/grayscale.svg[grayscale.svg] +| Converts the image to grayscale. + +| +| Invert Colors +| image:icons/invert.svg[invert.svg] +| Inverts the image colors. + +| +| Sharpen +| image:icons/sharpen.svg[sharpen.svg] +| Sharpens the image. + +| +| Blur +| image:icons/blur.svg[blur.svg] +| Blurs the image. + +| Filters +| +| image:icons/auto-image-enhancement.svg[auto-image-enhancement.svg] +| Provides tools for applying filters to the image. + +| Alt Text +| +| image:icons/alt-text.svg[alt-text.svg] +| Adds alternative text to describe the image for accessibility purposes. + +| +| Decorative Image +| image:icons/image-decorative.svg[image-decorative.svg] +a| +Marks the image as decorative, indicating it doesn't require alternative text for accessibility. + +This icon will only appear when the `a11y_advanced_options` configuration option is enabled. + +| Caption +| +| image:icons/caption.svg[caption.svg] +| Adds a caption below the image for additional context. + +| Revert +| +| image:icons/revert.svg[revert.svg] +| Restores the image to its original state by undoing all edits. +|=== + +== Options + +The following configuration options affect the behavior of the {pluginname} plugin: + + +include::partial$configuration/uploadcare_srcset_steps.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_filters.adoc[leveloffset=+1] + +:includedSection: uploadcarePlugin +include::partial$configuration/a11y_advanced_options.adoc[leveloffset=+1] +:!includedSection: + +:pluginfeature: uc-image +include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] + +include::partial$misc/plugin-menu-item-id-boilerplate.adoc[] diff --git a/modules/ROOT/pages/uploadcare-video.adoc b/modules/ROOT/pages/uploadcare-video.adoc new file mode 100644 index 0000000000..1c7e01b7c7 --- /dev/null +++ b/modules/ROOT/pages/uploadcare-video.adoc @@ -0,0 +1,143 @@ += Media Optimizer (Video) +:navtitle: Video feature of the Media Optimizer plugin +:description: The Video feature of the Media Optimizer plugin allows you to optimize videos in your content. +:description_short: optimize videos in your content. +:plugincode: uploadcare +:pluginname: Media Optimizer's Video feature +:keywords: plugin, {plugincode}, video, controls, autoplay, loop, poster, resize, upload, url, insert, edit, video +:plugincategory: premium + +The {pluginname} plugin allows {productname} users to upload, process, and embed both images and videos directly within the editor. + +== Overview + +The {pluginname} plugin extends {productname} with powerful video handling features that allow users to upload, process, and embed videos directly within the editor. The plugin leverages Uploadcare's infrastructure to provide video processing, custom video player functionality, and responsive video sizing. + +== Key benefits + +* Upload and optimize videos directly within the editor +* Custom video player with configurable properties +* Video poster image generation +* Responsive video sizing +* Support for MP4 and WebM formats +* Drag-and-drop video upload +* URL-based video insertion +* Video controls customization +* Accessibility features for videos + +== Interactive example + +liveDemo::uploadcare-video[] + +== Basic setup + +To add the {pluginname} plugin to the editor, include `uploadcare` in the `plugins` option in the editor configuration. + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'uploadcare', + toolbar: 'uploadcare uploadcare-video', + uploadcare_public_key: '', // Required for Uploadcare integration +}); +---- + +[NOTE] +==== +The {pluginname} plugin uses the same plugin code `+uploadcare+` as the Media Optimizer plugin. Video functionality is automatically enabled when video files are uploaded. + +When bundling {productname} with webpack or similar tools, the xref:uploadcare.adoc#uploadcare-resources[uploadcare_resources] option is required for video functionality to work properly, as it tells the plugin where to find the additional JavaScript resources needed for video playback. +==== + +== Video Operations + +Below is an overview of the features provided by the Video Optimizer plugin: + +[cols="1,1,4",options="header"] +|=== +| Feature | Icon | Description + +| Upload +| image:icons/folder.svg[folder.svg] +| Upload videos via drag-and-drop, file selection, or URL input + +| Upload from URL +| image:icons/link.svg[link.svg] +| Upload videos from a URL +|=== + +Below are the video player control options that are available to the video element: + +[cols="2,4",options="header"] +|=== +| Operation | Description + +| Play +| Customize video player controls and behavior + +| Mute +| Mute the video + +| Unmute +| Unmute the video + +| Slider +| Shows the progress of the video and allows users to move the slider to seek to a specific time in the video + +| Resize +| Changes the size of the video (when enabled) + +| Remaining Time +| Shows the remaining time of the video + +| Picture-in-Picture +| Enables picture-in-picture mode for the video + +| Settings +| Opens the video settings menu + +| Fullscreen +| Enables fullscreen mode for the video + +| UC Logo +| Shows the Uploadcare logo +|=== + +== Options + +The following configuration options affect the behavior of the {pluginname} plugin: + +include::partial$configuration/uploadcare_video_properties.adoc[leveloffset=+1] + +include::partial$configuration/uploadcare_video_resize.adoc[leveloffset=+1] + +== Custom Video Element + +The plugin creates a custom `++` element that replaces the standard HTML `+