Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions modules/ROOT/pages/editor-important-options.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ include::partial$configuration/target.adoc[leveloffset=+1]

include::partial$configuration/placeholder.adoc[leveloffset=+1]

== Configuring the editor iframe

include::partial$configuration/iframe_attrs.adoc[leveloffset=+1]

== Focusing on the editor

include::partial$configuration/taborder.adoc[leveloffset=+1]
Expand Down Expand Up @@ -52,8 +56,3 @@ include::partial$configuration/content_security_policy.adoc[leveloffset=+1]
include::partial$configuration/referrer_policy.adoc[leveloffset=+1]

include::partial$configuration/suffix.adoc[leveloffset=+1]

////
Not documented, but probably belongs in a new section here somewhere.
include::partial$configuration/iframe_attrs.adoc[]
////
41 changes: 41 additions & 0 deletions modules/ROOT/partials/configuration/iframe_attrs.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
[[iframe_attrs]]
== `+iframe_attrs+`

This option allows adding custom attributes to the editor's content iframe element when running in classic mode. The attributes are applied during the iframe creation.

NOTE: This option only affects the main editor content iframe, not other iframes such as preview frames, dialog iframes, or iframe elements created within the editor content.


*Type:* `+Object+`

.Example: using `+iframe_attrs+` for accessibility
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
iframe_attrs: {
'aria-required': 'true',
'aria-describedby': 'editor-description'
}
});
----

.Example: using `+iframe_attrs+` for custom styling
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
iframe_attrs: {
'style': 'background-color:rgb(64, 167, 99); border: 2px solid #ddd;',
'class': 'custom-editor-frame'
}
});
----

.Example: verifying `+iframe_attrs+` configuration
[source,js]
----
// After the editor is initialized, you can verify the configuration:
console.log(tinymce.activeEditor.options.get('iframe_attrs'));
// Output: {style: 'background-color:rgb(64, 167, 99); border: 2px solid #ddd;', class: 'custom-editor-frame'}
----