Skip to content

Commit b38dfd5

Browse files
author
Farzad Hayat
authored
DOC-2162: Improve documentation for noneditable options and multi-root editing (#3057)
* DOC-2162: initial outline with non-editable related options extracted to non-editable-content-options.adoc * DOC-2162: updated references in ie-template-creation.adoc and added admonition referencing back to non-editable-content-options.adoc * Add admonition from non-editable-content-options.adoc to the ie-template-creation.adoc * add demo outline for noneditable-regexp option * added demo for noneditable-class option * added demo for editable-class and editable-root options * improve noneditable-regexp demo * Update changelog.md
1 parent 6f4721e commit b38dfd5

File tree

11 files changed

+151
-10
lines changed

11 files changed

+151
-10
lines changed

‎changelog.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/
66

77
### Unreleased
88

9+
### 2024-02-13
10+
11+
- DOC-2162: Improve documentation for `noneditable` options and multi-root editing.
12+
913
### 2024-02-09
1014

1115
- DOC-2281: updates to `cloud-troubleshooting.adoc` with new `link` directs to `domain-not-registered`.

‎modules/ROOT/examples/live-demos/editable-class-and-editable-root/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<textarea id="editable-class">
2+
<h3>Everything in this page is `noneditable` except elements with the "editable" class:</h3>
3+
<div class="myclass editable">You can edit me :)</div>
4+
5+
<hr>
6+
7+
<div class="myclass editable">You can edit me too</div>
8+
9+
<hr>
10+
11+
<div class="myclass">This information must not be changed...</div>
12+
13+
&nbsp;
14+
15+
{{logofordemoshtml}}
16+
17+
<h2>Found a bug?</h2>
18+
19+
<p>If you believe you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
20+
21+
<h2>Finally…</h2>
22+
23+
<p>Don’t forget to check out <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
24+
<p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
25+
<p>All the best from the TinyMCE team.</p>
26+
</textarea>

‎modules/ROOT/examples/live-demos/editable-class-and-editable-root/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
tinymce.init({
2+
selector: 'textarea#editable-class',
3+
height: 500,
4+
content_style: `
5+
body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
6+
.editable { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
7+
`,
8+
editable_root: false,
9+
editable_class: 'editable',
10+
});

‎modules/ROOT/examples/live-demos/noneditable-class/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<textarea id="noneditable-class">
2+
Editable div example
3+
<div class="myclass">You can edit me :)</div>
4+
5+
<hr>
6+
7+
Non-editable div example
8+
<div class="myclass non-editable">You can NOT edit me!</div>
9+
10+
<hr>
11+
12+
&nbsp;
13+
14+
{{logofordemoshtml}}
15+
16+
<h2>Found a bug?</h2>
17+
18+
<p>If you believe you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
19+
20+
<h2>Finally…</h2>
21+
22+
<p>Don’t forget to check out <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
23+
<p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
24+
<p>All the best from the TinyMCE team.</p>
25+
</textarea>

‎modules/ROOT/examples/live-demos/noneditable-class/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
tinymce.init({
2+
selector: 'textarea#noneditable-class',
3+
height: 500,
4+
content_style: `
5+
body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
6+
.myclass { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
7+
.non-editable { border-color: red; }
8+
`,
9+
noneditable_class: 'non-editable',
10+
});

‎modules/ROOT/examples/live-demos/noneditable-regexp/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<textarea id="noneditable-regexp">
2+
Editable numbers div example
3+
<div class="myclass green">123456789</div>
4+
5+
<hr>
6+
7+
Non-editable numbers div example
8+
<div class="myclass red">123-456-789</div>
9+
10+
<hr>
11+
12+
Non-editable numbers div example
13+
<div class="myclass red">111-222-333</div>
14+
15+
<hr>
16+
17+
Non-editable apikey div example
18+
<div class="myclass red">sometext apikeyyyy</div>
19+
20+
<hr>
21+
22+
&nbsp;
23+
24+
{{logofordemoshtml}}
25+
26+
<h2>Found a bug?</h2>
27+
28+
<p>If you believe you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
29+
30+
<h2>Finally…</h2>
31+
32+
<p>Don’t forget to check out <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
33+
<p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
34+
<p>All the best from the TinyMCE team.</p>
35+
</textarea>

‎modules/ROOT/examples/live-demos/noneditable-regexp/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
tinymce.init({
2+
selector: 'textarea#noneditable-regexp',
3+
height: 500,
4+
content_style: `
5+
body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
6+
.green { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
7+
.red * { border: 0.1rem solid red; border-radius: 0.8rem; padding: 0.2rem; }
8+
`,
9+
noneditable_regexp: /apikey|\d{3}-\d{3}-\d{3}/g,
10+
});

‎modules/ROOT/nav.adoc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,7 @@
270270
* Content
271271
** xref:add-css-options.adoc[Add CSS]
272272
** xref:content-behavior-options.adoc[Behaviors]
273+
** xref:non-editable-content-options.adoc[Non-editable content]
273274
** xref:user-formatting-options.adoc[User formatting]
274275
** xref:content-filtering.adoc[Content filtering]
275276
** xref:content-localization.adoc[Localization]

‎modules/ROOT/pages/content-behavior-options.adoc‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,16 @@
44

55
include::partial$configuration/custom_undo_redo_levels.adoc[]
66

7-
include::partial$configuration/editable_root.adoc[]
8-
97
include::partial$configuration/end_container_on_empty_block.adoc[]
108

119
include::partial$configuration/draggable_modal.adoc[]
1210

1311
include::partial$configuration/keep_styles.adoc[]
1412

15-
include::partial$configuration/editable_class.adoc[]
16-
1713
include::partial$configuration/newdocument_content.adoc[]
1814

1915
include::partial$configuration/newline_behavior.adoc[]
2016

21-
include::partial$configuration/noneditable_class.adoc[]
22-
23-
include::partial$configuration/noneditable_regexp.adoc[]
24-
2517
include::partial$configuration/object_resizing.adoc[]
2618

2719
include::partial$configuration/resize_img_proportional.adoc[]

‎modules/ROOT/pages/ie-template-creation.adoc‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@ Used here to show a TinyMCE instance loading an entire almost-ready-to-send-out
3333

3434
a|
3535
[.lead]
36-
xref:content-behavior-options.adoc#editable_root[`editable_root`]
36+
xref:non-editable-content-options.adoc#editable_root[`editable_root`]
3737

3838
Sets the initial editable state of a TinyMCE instance’s root.
3939

4040
Used here to show a TinyMCE being used to present an almost-ready-to-send-out standard document that cannot, in the main, be changed by an end-user.
4141

4242
a|
4343
[.lead]
44-
xref:content-behavior-options.adoc#editable_class[`editable_class`]
44+
xref:non-editable-content-options#editable_class[`editable_class`]
4545

4646
Specifies the class name that TinyMCE will use to determine which areas of content are editable.
4747

@@ -57,4 +57,7 @@ Used here to setup the portions of an almost-ready-to-send-out standard document
5757

5858
|===
5959

60+
[NOTE]
61+
Refer to xref:non-editable-content-options.adoc[Non-editable content options] for more detailed `noneditable` configuration information.
62+
6063
liveDemo::ie-template-creation[]

0 commit comments

Comments
 (0)