add description to each example

This commit is contained in:
Kevin Jahns 2018-11-27 00:57:15 +01:00
parent 01d0825ae6
commit 9bd199a6e7
4 changed files with 23 additions and 13 deletions

View File

@ -10,8 +10,12 @@
</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 id="content" contenteditable=""></div>
</div>
<script class="code-js" src="./build/dom.js">
import * as Y from 'yjs/index.mjs'

View File

@ -41,9 +41,12 @@
</style>
</head>
<body>
<p>This example shows how to bind a YXmlFragment type to a <a href="http://prosemirror.net">Prosemirror</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="editor" style="margin-bottom: 23px"></div>
<div style="display: none" id="content"></div>
<div id="editor" style="margin-bottom: 23px"></div>
<div style="display: none" id="content"></div>
</div>
<script class="code-js" src="./build/prosemirror.js">
import * as Y from 'yjs'

View File

@ -1,16 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Yjs Prosemirror Example</title>
<link rel=stylesheet href="https://prosemirror.net/css/editor.css">
</head>
<title>Yjs Quill Example</title>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
</head>
<body>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<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 id="quill-container">
<div id="quill">
</div>
</div>
</div>
<script class="code-js" src="./build/quill.js">
import * as Y from 'yjs'

View File

@ -2,11 +2,13 @@
<html>
<head>
<title>Yjs Textarea Example</title>
<link rel=stylesheet href="https://prosemirror.net/css/editor.css">
</head>
<body>
<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>
<div class="code-html">
<textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
<textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
</div>
<script class="code-js" src="./build/textarea.js">
import * as Y from 'yjs'