-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add browser setup to readme, update version
- Loading branch information
1 parent
9e85ea8
commit 1999d15
Showing
2 changed files
with
63 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters