Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

INT-3320: Remove Quick Start guide from README.md #58

Merged
merged 3 commits into from
Jul 17, 2024
Merged

INT-3320: Remove Quick Start guide from README.md #58

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f9d759
INT-3320: Update Quick Start guide in README.md
FarzadHayat Jul 9, 2024
ce5db41
INT-3320: Change Vite template from `svelte-ts` to `svelte`
FarzadHayat Jul 9, 2024
21afa57
INT-3320: Remove Quick Start guide from README.md
FarzadHayat Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 23 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,48 @@ This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinym
* For the TinyMCE Svelte Technical Reference, see: [TinyMCE Documentation - TinyMCE Svelte Technical Reference](https://www.tiny.cloud/docs/tinymce/7/svelte-ref/).
* For our quick demos, check out the TinyMCE Svelte [Storybook](https://tinymce.github.io/tinymce-svelte/).


## Quick start

### Create a Svelte App from a template
### Create a Svelte App with Vite

```
npx degit sveltejs/template my-tiny-app
cd my-tiny-app
```bash
npm create vite@5 tinymce-svelte-demo -- --template svelte-ts
cd tinymce-svelte-demo
npm install
```

### Add the Editor component

Install the editor component in your project

```
```bash
npm install @tinymce/tinymce-svelte
```

## Import the TinyMCE component
### Import the TinyMCE component

Import the TinyMCE component inside the script tag of your Svelte app
Replace the contents of `src/App.svelte` with the following code and replace `your-api-key` with your Tiny Cloud API key:

```
```html
<script lang="ts">
import Editor from '@tinymce/tinymce-svelte';
let conf = {
menubar: false
FarzadHayat marked this conversation as resolved.
Show resolved Hide resolved
}
</script>
<main>
<h1> Hello Tiny</h1>
<Editor />
<h1>Hello Tiny</h1>
<Editor
apiKey="your-api-key"
{conf}
/>
</main>

```

### Run the app

```bash
npm run dev
```

### Issues

Have you found an issue with tinymce-svelte or do you have a feature request? Open up an [issue](https://github.com/tinymce/tinymce-svelte/issues) and let us know or submit a [pull request](https://github.com/tinymce/tinymce-svelte/pulls). *Note: For issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce).*
Have you found an issue with tinymce-svelte or do you have a feature request? Open up an [issue](https://github.com/tinymce/tinymce-svelte/issues) and let us know or submit a [pull request](https://github.com/tinymce/tinymce-svelte/pulls). *Note: For issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce).*
Loading