Skip to content

Commit

Permalink
Add browser setup to readme, update version
Browse files Browse the repository at this point in the history
  • Loading branch information
alekswebnet committed Jul 7, 2024
1 parent 9e85ea8 commit 1999d15
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 3 deletions.
64 changes: 62 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,74 @@ No matter if you want to create full-featured editor with all Quill's modules or

## Setup

**Browser:**

```html
<!-- Include Quill 2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

<!-- Import Vue and vue-quilly -->
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
"vue-quilly": "https://unpkg.com/[email protected]/dist/vue-quilly.js"
}
}
</script>

<!-- Initialize the editor -->
<div id="app">
<quilly-editor ref="editor" v-model="model" :options="options" />
</div>

<script type="module">
import { createApp, ref, onMounted } from 'vue'
import { QuillyEditor } from 'vue-quilly'
createApp({
setup() {
const options = {
theme: 'snow',
modules: {
toolbar: true,
},
placeholder: 'Compose an epic...',
readOnly: false
}
const editor = ref()
const model = ref('<p>Hello Quilly!</p>')
let quill = null
onMounted(() => {
quill = editor.value.initialize(Quill)
})
return {
editor,
options,
model
}
}
})
.component('QuillyEditor', QuillyEditor)
.mount('#app')
</script>
```
Browser setup demo - https://codepen.io/redrobot753/pen/VwJwPLP

**Bundlers:**

```bash
npm install quill vue-quilly
# Or
yarn add quill vue-quilly
# Or
pnpm add quill vue-quilly
```

## Get started

Import Quill full build if you need all modules or [core build](https://quilljs.com/docs/installation#core-build) with minimum required modules:

```ts
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vue-quilly",
"private": false,
"version": "1.0.4",
"version": "1.0.5",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down

0 comments on commit 1999d15

Please sign in to comment.