Skip to content

Commit d1b63bc

Browse files
tiny-ben-trantiny-ben-tran
committed
DOC-3180: Update web component integration doc
1 parent cc2220f commit d1b63bc

File tree

4 files changed

+34
-53
lines changed

4 files changed

+34
-53
lines changed

‎antora.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ asciidoc:
1212
tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/7/tinydrive.min.js
1313
tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/7/tinymce.min.js
1414
tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/7/tinydrive.min.js
15-
webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js
15+
webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js
1616
jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js
1717
openai_proxy_url: https://openai.ai-demo-proxy.tiny.cloud/v1/chat/completions
1818
openai_proxy_token: eyJhbGciOiJFUzM4NCJ9.eyJhdWQiOlsiaHR0cHM6Ly9vcGVuYWkuYWktZGVtby1wcm94eS50aW55LmNsb3VkLyJdLCJleHAiOjE3NTEzMjgwMDAsImh0dHBzOi8vb3BlbmFpLmFpLWRlbW8tcHJveHkudGlueS5jbG91ZC9yb2xlIjoicHVibGljLWRlbW8iLCJpc3MiOiJodHRwczovL2FpLWRlbW8tcHJveHkudGlueS5jbG91ZC8iLCJqdGkiOiJmOGFmY2EyNC1mN2FhLTQxMjktYTc2Yy02YThlZDU3YjAyZjYiLCJzdWIiOiJhaS1hc3Npc3RhbnQtZGVtbyJ9.Xu0apHCbxgmRQTeTqrTIDFFhh2CgKeARRXa3mCxSGoCwZqkoQaFRZBCzDo8Xz7DuUa5mW2XHl-HYcYiXJM9ly16d0oY7lJefHBeLlmJEBE1CSttHBkCRWZS8eFLCasL6

‎modules/ROOT/examples/live-demos/web-component/index.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎modules/ROOT/partials/integrations/webcomponent-quick-start.adoc‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,12 @@ The https://github.com/tinymce/tinymce-webcomponent[Official {productname} Web C
66

77
To add a {productname} editor to a web page using the {productname} Web Component:
88

9-
. Add the `+DOCTYPE+` element to the target page, such as:
9+
. Add the following meta tags to the head section of the page:
1010
+
1111
[source,html]
1212
----
13-
<!DOCTYPE html>
14-
----
15-
+
16-
The `+DOCTYPE+` declaration is required for the editor to function correctly.
17-
. Add the following `+meta+` elements to the head of page:
18-
+
19-
[source,html]
20-
----
21-
<head>
2213
<meta charset="UTF-8">
2314
<meta name="viewport" content="width=device-width, initial-scale=1">
24-
</head>
2515
----
2616
+
2717
The second `+meta+` element is required for the editor to function correctly on mobile devices. For information on the viewport `+meta+` element, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics[MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers].
@@ -52,7 +42,7 @@ npm install tinymce @tinymce/tinymce-webcomponent
5242
include::partial$integrations/bundling-integration.adoc[]
5343
--
5444

55-
. Add a `+script+` element sourcing {productname}, such as:
45+
. Add a `+script+` element sourcing the output file, such as:
5646
+
5747
[source,html]
5848
----
@@ -63,7 +53,7 @@ If a `script` element sourcing {productname} is not provided, the {productname}
6353

6454
endif::[]
6555
ifeval::["{productSource}" == "zip"]
66-
. Add a `+script+` element sourcing the {productname} Web Component (`+tinymce-webcomponent.js+`), such as:
56+
. Add a `+script+` element sourcing the {productname} Web Component (`+tinymce-webcomponent.min.js+`), such as:
6757
+
6858
[source,html,subs="attributes+"]
6959
----
@@ -80,7 +70,9 @@ The `tinymce-webcomponent` can also be sourced from link:https://www.npmjs.com/p
8070
----
8171
+
8272
If a `+script+` element sourcing {productname} is not provided, the {productname} Web Component will load {productname} from the {cloudname}. For information on the available options for sourcing {productname}, see: xref:webcomponent-ref.adoc#loading-tinymce[Loading {productname}].
73+
8374
endif::[]
75+
8476
ifeval::["{productSource}" == "cloud"]
8577
. Add a `+tinymce-editor+` element where the editor should appear and include your {cloudname} API key from link:{accountpageurl}/[{accountpage}].
8678
+
@@ -91,17 +83,22 @@ ifeval::["{productSource}" == "cloud"]
9183
></tinymce-editor>
9284
----
9385
endif::[]
86+
9487
ifeval::["{productSource}" != "cloud"]
9588
. Add a `+tinymce-editor+` element where the editor should appear.
9689
+
9790
[source,html,subs="attributes+"]
9891
----
99-
<tinymce-editor></tinymce-editor>
92+
<tinymce-editor license-key="your-license-key"/>
10093
----
101-
endif::[]
102-
+
10394
The default {productname} editor will load at this location if the page is opened in a web browser.
10495

96+
+
97+
. Update the `+license-key+` option in the editor element and include your xref:license-key.adoc[License Key].
98+
+
99+
endif::[]
100+
101+
ifeval::["{productSource}" == "cloud"]
105102
== Example: adding the TinyMCE Web Component to an HTML page
106103

107104
The following example shows the {productname} Web Component in an HTML page, with:
@@ -110,6 +107,7 @@ The following example shows the {productname} Web Component in an HTML page, wit
110107
* {productname} sourced from the {cloudname}.
111108

112109
liveDemo::web-component[tab="html"]
110+
endif::[]
113111

114112
== Next Steps
115113

‎modules/ROOT/partials/integrations/webcomponent-tech-ref.adoc‎

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ To add the {productname} Web Component integration to a JavaScript project, on c
5555
+
5656
[source,sh]
5757
----
58-
npm i --save @tinymce/tinymce-webcomponent
58+
npm i @tinymce/tinymce-webcomponent
5959
----
6060
* Yarn users:
6161
+
@@ -189,13 +189,6 @@ To set the menus shown on the editor menu bar, add the `+menubar+` attribute. Fo
189189
<tinymce-editor menubar="file edit insert view format table tools help"></tinymce-editor>
190190
----
191191

192-
To disable or remove the menu bar, set the `+menubar+` attribute to `+"false"+`. For example:
193-
194-
[source,html]
195-
----
196-
<tinymce-editor menubar="false"></tinymce-editor>
197-
----
198-
199192
To change the menu items shown in the menus, or define custom menus, set the `+menu+` configuration option using the `+config+` attribute.
200193

201194
For information on:
@@ -214,13 +207,6 @@ To change the context menu sections that can be shown in the editor context menu
214207
<tinymce-editor plugins="link image table" contextmenu="link image table"></tinymce-editor>
215208
----
216209

217-
To disable the context menu, set the `+contextmenu+` attribute to `+"false"+`. For example:
218-
219-
[source,html]
220-
----
221-
<tinymce-editor contextmenu="false"></tinymce-editor>
222-
----
223-
224210
For a list of available context menu sections, see: xref:editor-context-menu-identifiers.adoc[Available context menu sections]. For information on context menus, see: xref:menus-configuration-options.adoc#contextmenu[User interface options - `+contextmenu+`].
225211

226212
[[setting-the-quick-insert-toolbar]]
@@ -379,11 +365,11 @@ To execute a javascript callback before the editor instance is rendered, use the
379365
[source,html]
380366
----
381367
<script>
382-
function setupEditor(editor) {
383-
editor.on('click', function () {
384-
console.log('Editor was clicked');
385-
});
386-
}
368+
function setupEditor(editor) {
369+
editor.on('click', function () {
370+
console.log('Editor was clicked');
371+
});
372+
}
387373
</script>
388374
<tinymce-editor setup="setupEditor"></tinymce-editor>
389375
----
@@ -520,11 +506,11 @@ To configure any {productname} option that does not have a corresponding attribu
520506
[source,html]
521507
----
522508
<script>
523-
window.myConfig = {
524-
height: 500,
525-
spellchecker_dialog: true,
526-
spellchecker_ignore_list: ['Ephox', 'Moxiecode']
527-
};
509+
window.myConfig = {
510+
height: 500,
511+
spellchecker_dialog: true,
512+
spellchecker_ignore_list: ['Ephox', 'Moxiecode']
513+
};
528514
</script>
529515
<tinymce-editor
530516
config="myConfig"
@@ -546,11 +532,11 @@ There are two methods to bind events for the TinyMCE Web Component.
546532
[source,html]
547533
----
548534
<script>
549-
function setupEditor(editor) {
550-
editor.on('click', function () {
551-
console.log('Editor was clicked');
552-
});
553-
}
535+
function setupEditor(editor) {
536+
editor.on('click', function () {
537+
console.log('Editor was clicked');
538+
});
539+
}
554540
</script>
555541
<tinymce-editor setup="setupEditor"/>
556542
----
@@ -559,9 +545,9 @@ function setupEditor(editor) {
559545
[source,html]
560546
----
561547
<script>
562-
function changeHandler(evt) {
563-
console.log('The ' + evt['type'] + ' event was fired.');
564-
}
548+
function changeHandler(evt) {
549+
console.log('The ' + evt['type'] + ' event was fired.');
550+
}
565551
</script>
566552
<tinymce-editor on-Change="changeHandler"/>
567553
----

0 commit comments

Comments
 (0)