Skip to content

Commit 1f79cad

Browse files
committed
DOC-3229: Add missing iframe_attrs option.
1 parent ed5a8b7 commit 1f79cad

File tree

2 files changed

+44
-5
lines changed

2 files changed

+44
-5
lines changed

modules/ROOT/pages/editor-important-options.adoc

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ include::partial$configuration/target.adoc[leveloffset=+1]
1313

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

16+
== Configuring the editor iframe
17+
18+
include::partial$configuration/iframe_attrs.adoc[leveloffset=+1]
19+
1620
== Focusing on the editor
1721

1822
include::partial$configuration/taborder.adoc[leveloffset=+1]
@@ -56,8 +60,3 @@ include::partial$configuration/content_security_policy.adoc[leveloffset=+1]
5660
include::partial$configuration/referrer_policy.adoc[leveloffset=+1]
5761

5862
include::partial$configuration/suffix.adoc[leveloffset=+1]
59-
60-
////
61-
Not documented, but probably belongs in a new section here somewhere.
62-
include::partial$configuration/iframe_attrs.adoc[]
63-
////
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
[[iframe_attrs]]
2+
== `+iframe_attrs+`
3+
4+
This option allows setting custom attributes on the editor's content iframe element when {productname} is running in iframe mode. The attributes are applied during iframe creation and can be used for accessibility compliance, form validation, custom styling, and other customization needs.
5+
6+
NOTE: This option only affects the main editor content iframe, not other iframes such as preview frames or dialog iframes.
7+
8+
*Type:* `+Object+`
9+
10+
.Example: using `+iframe_attrs+` for accessibility
11+
[source,js]
12+
----
13+
tinymce.init({
14+
selector: 'textarea', // change this value according to your HTML
15+
iframe_attrs: {
16+
'aria-required': 'true',
17+
'aria-describedby': 'editor-description'
18+
}
19+
});
20+
----
21+
22+
.Example: using `+iframe_attrs+` for custom styling
23+
[source,js]
24+
----
25+
tinymce.init({
26+
selector: 'textarea', // change this value according to your HTML
27+
iframe_attrs: {
28+
'style': 'background-color:rgb(64, 167, 99); border: 2px solid #ddd;',
29+
'class': 'custom-editor-frame'
30+
}
31+
});
32+
----
33+
34+
.Example: verifying `+iframe_attrs+` configuration
35+
[source,js]
36+
----
37+
// After the editor is initialized, you can verify the configuration:
38+
console.log(tinymce.activeEditor.options.get('iframe_attrs'));
39+
// Output: {style: 'background-color: #f5f5f5; border: 2px solid #ddd;', class: 'custom-editor-frame'}
40+
----

0 commit comments

Comments
 (0)