Browse Source

DOC-3184: Update Svelte public documentation. (#3720)

* DOC-3184: Update Svelt public documentation.

* Update modules/ROOT/partials/integrations/svelte-quick-start.adoc

* DOC-3184: Replace your-tiny-cloud-api-key and your-api-key with no-api-key.
pull/3736/head
Karl Kemister-Sheppard 3 months ago
committed by GitHub
parent
commit
0864aa4965
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 53
      modules/ROOT/partials/integrations/svelte-quick-start.adoc
  2. 13
      modules/ROOT/partials/integrations/svelte-tech-ref.adoc

53
modules/ROOT/partials/integrations/svelte-quick-start.adoc

@ -1,10 +1,11 @@
The https://github.com/tinymce/tinymce-svelte[Official {productname} Svelte component] integrates {productname} into https://svelte.dev/[Svelte applications]. This procedure creates a basic Svelte application containing a {productname} editor.
The https://github.com/tinymce/tinymce-svelte[Official {productname} Svelte component] integrates {productname} into https://svelte.dev/[Svelte applications].
Creates a basic Svelte application containing a {productname} editor.
For examples of the {productname} integration, visit https://tinymce.github.io/tinymce-svelte/[the tinymce-svelte storybook].
For examples of the {productname} integration, visit the https://tinymce.github.io/tinymce-svelte/[tinymce-svelte storybook].
== Prerequisites
This procedure requires https://nodejs.org/[Node.js (and npm)].
Requires https://nodejs.org/[Node.js (and npm)].
== Procedure
@ -14,16 +15,22 @@ This procedure requires https://nodejs.org/[Node.js (and npm)].
----
npm create vite@5 tinymce-svelte-demo -- --template svelte
----
. Change to the newly created directory.
. Change to the project directory.
+
[source,sh]
----
cd tinymce-svelte-demo
----
. Install project dependencies.
+
[source,sh]
----
npm install
----
ifeval::["{productSource}" == "package-manager"]
. Install the `+tinymce+` and the `+tinymce-svelte+` editor component, such as:
. Install the `+tinymce+` and `+tinymce-svelte+` packages:
+
[source,sh,subs="attributes+"]
----
@ -33,7 +40,7 @@ npm install tinymce@^{productmajorversion} @tinymce/tinymce-svelte
endif::[]
ifeval::["{productSource}" != "package-manager"]
. Install the `+tinymce-svelte+` editor component, such as:
. Install the `+tinymce-svelte+` editor component:
+
[source,sh]
----
@ -66,7 +73,7 @@ let conf = {
<main>
<h1>Hello Tiny</h1>
<Editor
apiKey='your-tiny-cloud-api-key'
apiKey='no-api-key'
pass:a[channel='{productmajorversion}']
value='<p>This is the initial content of the editor.</p>'
{conf}
@ -74,16 +81,23 @@ let conf = {
</main>
----
[NOTE]
====
Replace `no-api-key` with a valid {cloudname} API key.
include::partial$misc/get-an-api-key.adoc[]
====
endif::[]
ifeval::["{productSource}" == "package-manager"]
. Install the `+vite-plugin-static-copy+` development dependency, such as:
. Install the `+vite-plugin-static-copy+` development dependency:
+
[source,sh]
----
npm install -D vite-plugin-static-copy
----
. Open `+vite.config.js+` and configure the `+vite-plugin-static-copy+` plugin to copy {productname} to the `+public/+` directory, such as:
. Configure `+vite.config.js+` to copy {productname} to the `+public/+` directory:
+
[source,js]
----
@ -133,6 +147,8 @@ let conf = {
/>
</main>
----
+
. Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
endif::[]
ifeval::["{productSource}" == "zip"]
@ -167,22 +183,27 @@ let conf = {
/>
</main>
----
+
. Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
endif::[]
. Test the application using the Node.js development server.
* To start the development server, in the project's root directory, run:
== Run the Application
Test the application using the Node.js development server.
. To start the development server:
+
[source,sh]
----
npm run dev
----
+
* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
. To stop the development server, use `+Ctrl+C+` in the terminal or command prompt.
== Next Steps
* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-svelte/[the tinymce-svelte storybook].
* For information on customizing, see:
** xref:basic-setup.adoc[{productname} basic setup].
** xref:svelte-ref.adoc[The {productname} Svelte integration technical reference].
* See the following for additional information:
** https://tinymce.github.io/tinymce-svelte/[tinymce-svelte storybook]
** xref:basic-setup.adoc[{productname} basic setup]
** xref:svelte-ref.adoc[{productname} Svelte integration technical reference]

13
modules/ROOT/partials/integrations/svelte-tech-ref.adoc

@ -38,6 +38,8 @@ The `+tinymce-svelte+` `+Editor+` component accepts the following properties:
{cloudname} API key. Required for deployments using the {cloudname} to provide the {productname} editor.
include::partial$misc/get-an-api-key.adoc[]
*Type:* `+String+`
*Default value:* `+'no-api-key'+`
@ -47,16 +49,16 @@ The `+tinymce-svelte+` `+Editor+` component accepts the following properties:
[source,jsx]
----
<Editor
apiKey="your-api-key"
apiKey="no-api-key"
/>
----
[[licenseKey]]
[[licensekey]]
=== `+licenseKey+`
{cloudname} License key.
Use this when self-hosting {productname} instead of loading from {cloudname}. For more information, see: xref:license-key.adoc[License Key].
Use this option when self-hosting {productname} instead of loading from {cloudname}. For more information, see: xref:license-key.adoc[License Key].
*Type:* `+String+`
@ -100,7 +102,7 @@ Specified an Id for the editor. Used for retrieving the editor instance using th
*Type:* `+String+`
*Default value:* Automatically generated https://tools.ietf.org/html/rfc4122[UUID]
*Default value:* Automatically generated link:https://tools.ietf.org/html/rfc4122[UUID]
==== Example using `+id+`
@ -114,7 +116,7 @@ Specified an Id for the editor. Used for retrieving the editor instance using th
[[inline]]
=== `+inline+`
Set the editor to inline mode.
Sets the editor to use inline mode.
*Type:* `+Boolean+`
@ -243,6 +245,7 @@ When the handler is called (*handlerFunction* in this example), it is called wit
`+editor+`:: A reference to the editor.
[TIP]
Ensure event names are specified in lower-case (event names are case-sensitive).
The following events are available:

Loading…
Cancel
Save