48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Yjs Quill Example</title>
|
|
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
|
|
</head>
|
|
<body>
|
|
<p>This example shows how to bind a YText type to <a href="https://quilljs.com">Quill</a> editor.</p>
|
|
<p>The content of this editor is shared with every client who visits this domain.</p>
|
|
<div class="code-html">
|
|
<div id="quill-container">
|
|
<div id="quill">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script class="code-js" src="./build/quill.js">
|
|
import * as Y from 'yjs'
|
|
import { WebsocketProvider } from 'yjs/provider/websocket.js'
|
|
import { QuillBinding } from 'yjs/bindings/quill.js'
|
|
|
|
import Quill from 'quill'
|
|
|
|
const provider = new WebsocketProvider('wss://api.yjs.website')
|
|
const ydocument = provider.get('quill')
|
|
const ytext = ydocument.define('quill', Y.Text)
|
|
|
|
const quill = new Quill('#quill-container', {
|
|
modules: {
|
|
toolbar: [
|
|
[{ header: [1, 2, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
['image', 'code-block'],
|
|
[{ color: [] }, { background: [] }], // Snow theme fills in values
|
|
[{ script: 'sub' }, { script: 'super' }],
|
|
['link', 'image'],
|
|
['link', 'code-block'],
|
|
[{ list: 'ordered' }, { list: 'bullet' }]
|
|
]
|
|
},
|
|
placeholder: 'Compose an epic...',
|
|
theme: 'snow' // or 'bubble'
|
|
})
|
|
|
|
window.quillBinding = new QuillBinding(ytext, quill)
|
|
|
|
</script>
|
|
</body>
|
|
</html> |