diff --git a/antora.yml b/antora.yml index 84a066a15e..138e89b557 100644 --- a/antora.yml +++ b/antora.yml @@ -12,8 +12,8 @@ asciidoc: tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/7/tinydrive.min.js tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/7/tinymce.min.js tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/7/tinydrive.min.js - webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js - jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery/dist/tinymce-jquery.min.js + webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js + jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js openai_proxy_url: https://openai.ai-demo-proxy.tiny.cloud/v1/chat/completions openai_proxy_token: eyJhbGciOiJFUzM4NCJ9.eyJhdWQiOlsiaHR0cHM6Ly9vcGVuYWkuYWktZGVtby1wcm94eS50aW55LmNsb3VkLyJdLCJleHAiOjE3NTEzMjgwMDAsImh0dHBzOi8vb3BlbmFpLmFpLWRlbW8tcHJveHkudGlueS5jbG91ZC9yb2xlIjoicHVibGljLWRlbW8iLCJpc3MiOiJodHRwczovL2FpLWRlbW8tcHJveHkudGlueS5jbG91ZC8iLCJqdGkiOiJmOGFmY2EyNC1mN2FhLTQxMjktYTc2Yy02YThlZDU3YjAyZjYiLCJzdWIiOiJhaS1hc3Npc3RhbnQtZGVtbyJ9.Xu0apHCbxgmRQTeTqrTIDFFhh2CgKeARRXa3mCxSGoCwZqkoQaFRZBCzDo8Xz7DuUa5mW2XHl-HYcYiXJM9ly16d0oY7lJefHBeLlmJEBE1CSttHBkCRWZS8eFLCasL6 default_meta_keywords: tinymce, documentation, docs, plugins, customizable skins, configuration, examples, html, php, java, javascript, image editor, inline editor, distraction-free editor, classic editor, wysiwyg diff --git a/modules/ROOT/examples/live-demos/web-component/index.js b/modules/ROOT/examples/live-demos/web-component/index.js deleted file mode 100644 index f845c820e4..0000000000 --- a/modules/ROOT/examples/live-demos/web-component/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/* -No Javascript is required for this configuration. -*/ \ No newline at end of file diff --git a/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc b/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc index 9f2c35c353..e7a63c14b9 100644 --- a/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc +++ b/modules/ROOT/partials/integrations/webcomponent-quick-start.adoc @@ -6,22 +6,12 @@ The https://github.com/tinymce/tinymce-webcomponent[Official {productname} Web C To add a {productname} editor to a web page using the {productname} Web Component: -. Add the `+DOCTYPE+` element to the target page, such as: +. Add the following meta tags to the head section of the page: + [source,html] ---- - ----- -+ -The `+DOCTYPE+` declaration is required for the editor to function correctly. -. Add the following `+meta+` elements to the head of page: -+ -[source,html] ----- - - ---- + 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 include::partial$integrations/bundling-integration.adoc[] -- -. Add a `+script+` element sourcing {productname}, such as: +. Add a `+script+` element sourcing the output file, such as: + [source,html] ---- @@ -63,7 +53,7 @@ If a `script` element sourcing {productname} is not provided, the {productname} endif::[] ifeval::["{productSource}" == "zip"] -. Add a `+script+` element sourcing the {productname} Web Component (`+tinymce-webcomponent.js+`), such as: +. Add a `+script+` element sourcing the {productname} Web Component (`+tinymce-webcomponent.min.js+`), such as: + [source,html,subs="attributes+"] ---- @@ -80,28 +70,35 @@ The `tinymce-webcomponent` can also be sourced from link:https://www.npmjs.com/p ---- + 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}]. + endif::[] + ifeval::["{productSource}" == "cloud"] . Add a `+tinymce-editor+` element where the editor should appear and include your {cloudname} API key from link:{accountpageurl}/[{accountpage}]. + [source,html] ---- ---- endif::[] + ifeval::["{productSource}" != "cloud"] . Add a `+tinymce-editor+` element where the editor should appear. + [source,html,subs="attributes+"] ---- - + ---- -endif::[] -+ The default {productname} editor will load at this location if the page is opened in a web browser. ++ +. Update the `+license-key+` option in the editor element and include your xref:license-key.adoc[License Key]. ++ +endif::[] + +ifeval::["{productSource}" == "cloud"] == Example: adding the TinyMCE Web Component to an HTML page 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 * {productname} sourced from the {cloudname}. liveDemo::web-component[tab="html"] +endif::[] == Next Steps diff --git a/modules/ROOT/partials/integrations/webcomponent-tech-ref.adoc b/modules/ROOT/partials/integrations/webcomponent-tech-ref.adoc index fae48acb81..1e711fbd61 100644 --- a/modules/ROOT/partials/integrations/webcomponent-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/webcomponent-tech-ref.adoc @@ -55,7 +55,7 @@ To add the {productname} Web Component integration to a JavaScript project, on c + [source,sh] ---- -npm i --save @tinymce/tinymce-webcomponent +npm i @tinymce/tinymce-webcomponent ---- * Yarn users: + @@ -189,13 +189,6 @@ To set the menus shown on the editor menu bar, add the `+menubar+` attribute. Fo ---- -To disable or remove the menu bar, set the `+menubar+` attribute to `+"false"+`. For example: - -[source,html] ----- - ----- - To change the menu items shown in the menus, or define custom menus, set the `+menu+` configuration option using the `+config+` attribute. For information on: @@ -214,13 +207,6 @@ To change the context menu sections that can be shown in the editor context menu ---- -To disable the context menu, set the `+contextmenu+` attribute to `+"false"+`. For example: - -[source,html] ----- - ----- - 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+`]. [[setting-the-quick-insert-toolbar]] @@ -308,10 +294,11 @@ To apply a small set of CSS styles to the editor, use the `+content_style+` attr For information on the `+content_style+` option, see: xref:add-css-options.adoc#content_style[Content appearance options - `+content_style+`]. -[[setting-powerpastes-word-import-method]] -=== Setting PowerPaste's word import method +=== Settings for when PowerPaste plugin enabled +NOTE: These settings only apply if the PowerPaste plugin (`+powerpaste+`) is enabled. -This setting only applies if the PowerPaste plugin (`+powerpaste+`) is enabled. +[[setting-powerpastes-word-import-method]] +==== PowerPaste's word import method To control how content pasted from Microsoft Word is filtered, use the `+powerpaste_word_import+` attribute. For example: @@ -323,9 +310,7 @@ To control how content pasted from Microsoft Word is filtered, use the `+powerpa For information on the `+powerpaste_word_import+` option, including supported values, see: xref:powerpaste-options.adoc#powerpaste_word_import[The PowerPaste plugin - `+powerpaste_word_import+`]. [[setting-powerpastes-html-import-method]] -=== Setting PowerPaste's html import method - -This setting only applies if the PowerPaste plugin (`+powerpaste+`) is enabled. +==== PowerPaste's html import method To control how content pasted from sources other than Microsoft Word is filtered, use the `+powerpaste_html_import+` attribute. For example: @@ -337,9 +322,8 @@ To control how content pasted from sources other than Microsoft Word is filtered For information on the `+powerpaste_html_import+` option, including supported values, see: xref:powerpaste-options.adoc#powerpaste_html_import[The PowerPaste plugin - `+powerpaste_html_import+`]. [[setting-powerpaste-to-allow-local-images]] -=== Setting PowerPaste to allow local images +==== PowerPaste to allow local images -This setting only applies if the PowerPaste plugin (`+powerpaste+`) is enabled. To prevent Base64 encoded images with a data URI from being pasted into the editor, set `+powerpaste_allow_local_images+` to `+"false"+`. For example: @@ -379,11 +363,11 @@ To execute a javascript callback before the editor instance is rendered, use the [source,html] ---- ---- @@ -520,11 +504,11 @@ To configure any {productname} option that does not have a corresponding attribu [source,html] ---- -function setupEditor(editor) { - editor.on('click', function () { - console.log('Editor was clicked'); - }); -} + function setupEditor(editor) { + editor.on('click', function () { + console.log('Editor was clicked'); + }); + } ---- @@ -559,9 +543,9 @@ function setupEditor(editor) { [source,html] ---- ----