35 lines
1.2 KiB
HTML
35 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Yjs Prosemirror Example</title>
|
|
<link rel=stylesheet href="https://prosemirror.net/css/editor.css">
|
|
<style>
|
|
#content {
|
|
min-height: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>This example shows how to bind a YXmlFragment type to an arbitrary DOM element. We set the DOM element to contenteditable so it basically behaves like a very powerful rich-text editor.</p>
|
|
<p>The content of this editor is shared with every client who visits this domain.</p>
|
|
<hr>
|
|
<div class="code-html">
|
|
|
|
<div id="content" contenteditable=""></div>
|
|
</div>
|
|
<script class="code-js" src="./build/dom.js">
|
|
import * as Y from 'yjs/index.js'
|
|
import { WebsocketProvider } from 'yjs/provider/websocket.js'
|
|
import { DomBinding } from 'yjs/bindings/dom.js'
|
|
|
|
const provider = new WebsocketProvider('wss://api.yjs.website')
|
|
const ydocument = provider.get('dom')
|
|
const type = ydocument.define('xml', Y.XmlFragment)
|
|
const binding = new DomBinding(type, document.querySelector('#content'), { scrollingElement: document.scrollingElement })
|
|
|
|
window.example = {
|
|
provider, ydocument, type, binding
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |