From 7570884300caa740614b860c1726a40e7ab8c5d4 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 16 Oct 2025 09:47:44 +1000 Subject: [PATCH 1/2] DOC-3223: Added support for loading web components into iframes. --- modules/ROOT/pages/8.2.0-release-notes.adoc | 7 +++++ .../configuration/custom_elements.adoc | 26 +++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 72151042b1..1d0762cb12 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -73,6 +73,13 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following addition: +=== Added support for loading web components into iframes +// #TINY-XXXX + +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 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]. + // === // #TINY-vwxyz1 diff --git a/modules/ROOT/partials/configuration/custom_elements.adoc b/modules/ROOT/partials/configuration/custom_elements.adoc index 03efb4ed24..582b22bb8a 100644 --- a/modules/ROOT/partials/configuration/custom_elements.adoc +++ b/modules/ROOT/partials/configuration/custom_elements.adoc @@ -19,6 +19,7 @@ tinymce.init({ * **Custom Element Structure:** The custom_elements option and the `addCustomElements` API supports more complex structures. This structure is defined by a record where the key represents the name of the element, and the value corresponds to a detailed specification. * **Attributes and Inheritance:** Elements inherit attributes and children from other specified elements using the `+extends: "div"+` property in the `custom_elements` spec. * **Attribute and Children Specifications:** The `custom_elements` spec includes properties such as `attributes` which lists attribute names, or `children` which lists valid child element names. The `children` property includes presets like `@global`, `@blocks`, `@phrasing`, and `@flow`. +* **Web Components Support:** Custom elements can specify a `+componentsUrl+` property to load web component scripts into the editor. HTML Element Sets: The exact element sets for each preset, depending on the schema set (html4, html5, or html5-strict), can be found in the below tables. @@ -96,4 +97,29 @@ tinymce.init({ }); }, }); +---- + +=== Example using `+custom_elements+` with block-level and inline-level components. + +[source, js] +---- +tinymce.init({ + selector: "textarea", + custom_elements: { + // Block-level custom element (behaves like a div) + "my-custom-block": { + extends: "div", + attributes: ["@global", "data-type", "data-id"], + children: ["@flow"], + componentsUrl: "/path/to/block-component.js" + }, + // Inline-level custom element (behaves like a span) + "my-custom-inline": { + extends: "span", + attributes: ["@global", "data-value"], + children: ["@phrasing"], + componentsUrl: "/path/to/inline-component.js" + } + } +}); ---- \ No newline at end of file From 9304039b099d983afaff974623fcaa94dca0cf34 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 16 Oct 2025 10:00:50 +1000 Subject: [PATCH 2/2] DOC-3223: Add link to api docs for new getComponentUrls. --- modules/ROOT/pages/8.2.0-release-notes.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 1d0762cb12..c5fd127579 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -74,9 +74,9 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a {productname} 8.2.0 also includes the following addition: === Added support for loading web components into iframes -// #TINY-XXXX +// #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 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. +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].