Skip to content

Commit fd06c12

Browse files
kemister85MitchC1999
kemister85
and
MitchC1999
authored
DOC-3243: New view_show option to display a specified view on initialization (#4021)
* Docs: DOC-3243 - New view_show option to display a specified view on initialization * Update modules/ROOT/pages/8.4.0-release-notes.adoc Co-authored-by: Mitchell Crompton <mitchell.crompton@tiny.cloud> * Update modules/ROOT/partials/configuration/view_show.adoc Co-authored-by: Mitchell Crompton <mitchell.crompton@tiny.cloud> * Apply Mitch's suggestion: use my-textarea class instead of tox-view__pane_panel --------- Co-authored-by: Mitchell Crompton <mitchell.crompton@tiny.cloud>
1 parent 78a201c commit fd06c12

10 files changed

Lines changed: 127 additions & 6 deletions

File tree

‎modules/ROOT/examples/live-demos/custom-view/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ tinymce.init({
1919
text: 'Save code',
2020
buttonType: 'primary',
2121
onAction: () => {
22-
const codeContent = document.querySelector('.tox-view__pane_panel').value;
22+
const codeContent = document.querySelector('.my-textarea').value;
2323
ed.setContent(codeContent);
2424
ed.execCommand('ToggleView', false, 'code');
2525
console.log('save');
@@ -28,12 +28,12 @@ tinymce.init({
2828
],
2929
onShow: (api) => {
3030
const editorContent = ed.getContent();
31-
api.getContainer().innerHTML = `
31+
const container = api.getContainer();
32+
container.innerHTML = `
3233
<div style="height: 100%">
33-
<textarea class="tox-view__pane_panel" style="width: 100%; height: 100%; resize: none; padding: 0.5em">
34-
${editorContent}
35-
</textarea>
36-
</div>`.replace(/\s+/g, '');
34+
<textarea class="my-textarea" style="width: 100%; height: 100%; resize: none; padding: 0.5em"></textarea>
35+
</div>`;
36+
container.querySelector('.my-textarea').value = editorContent;
3737
},
3838
onHide: (api) => {
3939
console.log('Deactivate code', api.getContainer());

‎modules/ROOT/pages/8.4.0-release-notes.adoc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,12 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
125125

126126
// CCFR here.
127127

128+
=== New `view_show` option to display a specified view on initialization.
129+
// #TINY-11967
130+
131+
132+
In {productname} {release-version}, the new xref:custom-view.adoc#view_show[`+view_show+`] option allows specifying which view to display when the editor is initialized. The option behaves similarly to `+sidebar_show+` but takes precedence for views; both sidebars and views can be configured to show on init.
133+
128134

129135
[[changes]]
130136
== Changes

‎modules/ROOT/pages/advcode.adoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ include::partial$configuration/advcode_prettify_getcontent.adoc[leveloffset=+1]
6666

6767
include::partial$configuration/advcode_prettify_editor.adoc[leveloffset=+1]
6868

69+
include::partial$plugins/advcode-open-view.adoc[]
70+
6971
include::partial$misc/advcode-shortcuts.adoc[]
7072

7173
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]

‎modules/ROOT/pages/custom-view.adoc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ To query the state of the custom view (whether it is currently visible or hidden
5757
editor.queryCommandValue('ToggleView') == 'myCustomView';
5858
----
5959

60+
== Options
61+
62+
include::partial$configuration/view_show.adoc[leveloffset=+1]
63+
6064
== Interactive example
6165

6266
This example shows how to integrate a custom view using the `addView` API.

‎modules/ROOT/pages/revisionhistory.adoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ include::partial$configuration/revisionhistory_css_url.adoc[leveloffset=+1]
121121

122122
include::partial$configuration/revisionhistory_diff_classes.adoc[leveloffset=+1]
123123

124+
include::partial$plugins/revisionhistory-open-view.adoc[]
125+
124126
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
125127

126128
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]

‎modules/ROOT/pages/suggestededits.adoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@ include::partial$configuration/suggestededits_access.adoc[leveloffset=+1]
127127

128128
include::partial$configuration/suggestededits_auto_approve.adoc[leveloffset=+1]
129129

130+
include::partial$plugins/suggestededits-open-view.adoc[]
131+
130132
include::partial$configuration/user_id.adoc[leveloffset=+1]
131133

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

‎modules/ROOT/partials/configuration/view_show.adoc‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
[[view_show]]
2+
== `+view_show+`
3+
4+
This option allows the specified view to be displayed on editor initialization. It behaves similarly to xref:customsidebar.adoc#sidebar_show[`+sidebar_show+`] but applies to views and takes precedence when both are configured. Views and sidebars can both be set to show on init, with the sidebar shown once the view is closed.
5+
6+
The value must match the name of a registered view. Premium plugins that register views include:
7+
8+
* xref:suggestededits.adoc[Suggested Edits] (`+suggestededits+`)
9+
* xref:revisionhistory.adoc[Revision History] (`+revision+`)
10+
* xref:advcode.adoc[Enhanced Code Editor] (`+code+`)
11+
12+
Custom views registered via xref:custom-view.adoc[`+addView+`] can also be specified.
13+
14+
include::partial$misc/admon-iframe-only.adoc[]
15+
16+
*Type:* `+String+`
17+
18+
=== Example: using `+view_show+` with a premium plugin
19+
20+
[source,js]
21+
----
22+
tinymce.init({
23+
selector: 'textarea', // change this value according to your HTML
24+
plugins: 'suggestededits',
25+
toolbar: 'suggestededits',
26+
view_show: 'suggestededits',
27+
// ... other Suggested Edits options (suggestededits_model, user_id, fetch_users)
28+
});
29+
----
30+
31+
=== Example: using `+view_show+` with a custom view
32+
33+
[source,js]
34+
----
35+
tinymce.init({
36+
selector: 'textarea', // change this value according to your HTML
37+
menubar: false,
38+
toolbar: 'view',
39+
view_show: 'view',
40+
setup: (editor) => {
41+
const toggleView = () => editor.execCommand('ToggleView', false, 'view');
42+
editor.ui.registry.addView('view', {
43+
onShow: (api) => {
44+
api.getContainer().innerHTML = '<p>You opened the view!</p>';
45+
},
46+
onHide: (api) => {
47+
api.getContainer().innerHTML = '';
48+
},
49+
buttons: [{
50+
type: 'button',
51+
text: 'Close',
52+
onAction: toggleView
53+
}]
54+
});
55+
editor.ui.registry.addButton('view', {
56+
text: 'Open view',
57+
onAction: toggleView
58+
});
59+
}
60+
});
61+
----

‎modules/ROOT/partials/plugins/advcode-open-view.adoc‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
== Show view on editor load
2+
3+
The xref:custom-view.adoc#view_show[`+view_show+`] option can be used to show the {pluginname} view when the editor is loaded.
4+
5+
.For example:
6+
[source,js]
7+
----
8+
tinymce.init({
9+
selector: 'textarea', // change this value according to your HTML
10+
plugins: 'advcode',
11+
toolbar: 'code',
12+
view_show: 'code',
13+
});
14+
----

‎modules/ROOT/partials/plugins/revisionhistory-open-view.adoc‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
== Show view on editor load
2+
3+
The xref:custom-view.adoc#view_show[`+view_show+`] option can be used to show the {pluginname} view when the editor is loaded.
4+
5+
.For example:
6+
[source,js]
7+
----
8+
tinymce.init({
9+
selector: 'textarea', // change this value according to your HTML
10+
plugins: 'revisionhistory',
11+
toolbar: 'revisionhistory',
12+
view_show: 'revision',
13+
revisionhistory_fetch: () => Promise.resolve([]), // Replace with API request to get saved revisions
14+
});
15+
----

‎modules/ROOT/partials/plugins/suggestededits-open-view.adoc‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
== Show view on editor load
2+
3+
The xref:custom-view.adoc#view_show[`+view_show+`] option can be used to show the {pluginname} view when the editor is loaded.
4+
5+
.For example:
6+
[source,js]
7+
----
8+
tinymce.init({
9+
selector: 'textarea', // change this value according to your HTML
10+
plugins: 'suggestededits',
11+
toolbar: 'suggestededits',
12+
view_show: 'suggestededits',
13+
// ... other Suggested Edits options (e.g. suggestededits_model, user_id, fetch_users)
14+
});
15+
----

0 commit comments

Comments
 (0)