2018-11-25 03:17:00 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2018-11-26 16:05:12 +01:00
|
|
|
<title>Yjs Textarea Example</title>
|
2018-11-25 03:17:00 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2018-11-27 00:57:15 +01:00
|
|
|
<p>This example shows how to bind a YText type to a DOM Textarea.</p>
|
|
|
|
|
<p>The content of this textarea is shared with every client who visits this domain.</p>
|
2018-11-25 03:17:00 +01:00
|
|
|
<div class="code-html">
|
2018-11-27 00:57:15 +01:00
|
|
|
|
|
|
|
|
<textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
|
2018-11-25 03:17:00 +01:00
|
|
|
</div>
|
|
|
|
|
<script class="code-js" src="./build/textarea.js">
|
2018-11-25 22:39:30 +01:00
|
|
|
import * as Y from 'yjs'
|
2018-11-27 14:59:12 +01:00
|
|
|
import { WebsocketProvider } from 'yjs/provider/websocket.js'
|
|
|
|
|
import { TextareaBinding } from 'yjs/bindings/textarea.js'
|
2018-11-25 03:17:00 +01:00
|
|
|
|
2018-11-26 16:05:12 +01:00
|
|
|
const provider = new WebsocketProvider('wss://api.yjs.website')
|
2018-11-25 03:17:00 +01:00
|
|
|
const ydocument = provider.get('textarea')
|
|
|
|
|
const type = ydocument.define('textarea', Y.Text)
|
|
|
|
|
const textarea = document.querySelector('textarea')
|
2018-11-26 16:05:12 +01:00
|
|
|
const binding = new TextareaBinding(type, textarea)
|
2018-11-25 03:17:00 +01:00
|
|
|
|
|
|
|
|
window.textareaExample = {
|
|
|
|
|
provider, ydocument, type, textarea, binding
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
