Date post: | 21-Oct-2014 |
Category: |
Technology |
View: | 617 times |
Download: | 2 times |
Real time collaborative editing for HTML
Realtime collaborative editing★ though operation transformation (OT)
★ for your HTML content
★ with true WYSIWYG
★ for web and native
About OT for HTML
“[...]and HTML makes OT (Operational Transforms) difficult if not impossible[...]”
http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5-
says
About OT for HTML
“[...]and HTML makes OT (Operational Transforms) difficult if not impossible[...]”
http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5-it is possible
says
create, share, edit on the go★ for desktop, tablet, mobile
★ web and native
★ native is more responsive and offers better possibilities for end user interaction
embed wikidocs wiki in your system★ Customizable and embed-able
★ 100% REST API coverage
★ authentication, access permissions, user management, storage, scalable, etc.
★ a starting point to extend your system with a wiki functionallity
embed wikidocs wiki in your system★ Customizable and embed-able
★ 100% REST API coverage
★ authentication, access permissions, user management, storage, scalable, etc.
★ a starting point to extend your system with a wiki functionallity
wikidocs demo app embeded as facebook app
wikidocs api: create a new app or integrate smoothly in your existing system
★ Your app
★ Your users
★ Your access rules
★ We sync
wikidocs api: create a new app or integrate smoothly in your existing system
★ Your app
★ Your users
★ Your access rules
★ We sync
wikidocs api transparently integrated in facebooks
group docs editor
Nice, but what’s the real difference?vs vs
Nice, but what’s the real difference?vs vs
First break is a line break second a
paragraph break.
Nice, but what’s the real difference?vs vs
Telepointers are out of sync with content.
First break is a line break second a
paragraph break.
Nice, but what’s real difference?
<div class="kix-paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-spelling-error kix-htmloverlay docs-ui-unprintable" style="top: 0px; left: 0px; width: 61px; height: 17px;"></div><div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 61px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Realti</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;">me</span></span></div></div><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 82px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;">collaborative</span></span></div></div></div><div class="kix-paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 50px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;"> </span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-decoration:underline;vertical-align:baseline;">ed</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;">iting</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">.</span></span></div></div></div>
vs vs
Nice, but what’s real difference?vs vs
<pre>! <span class=" firepad-b">Realti</span><span class=" firepad-b firepad-i">me</span></pre><pre>! <span class=" firepad-i">collaborative</span></pre><pre>! <span class=" firepad-u firepad-i">ed</span><span class=" firepad-u">iting</span></pre>
Nice, but what’s real difference?vs vs
<p>! <b>Realti<i>me</i></b><br>! <i>collaborative</i></p><p>! <u><i>ed</i>iting</u></p>
What about custom attributes?
<p contenteditable=”true”>! <span data-my-attr=”needs-work”>H3lp</span>! <i class=”highlight”>me</i></p>
This is an important feature for custom editing functionalities and extensions.
What about custom attributes?
<p contenteditable=”true”>! <span data-my-attr=”needs-work”>H3lp</span>! <i class=”highlight”>me</i></p>
we synch them
This is an important feature for custom editing functionalities and extensions.
What about non editables?
<p contenteditable=”true”><h1>Watch this</h1>
! <div class=”video” contenteditable=”false”>! ! <iframe src="//youtu.be/841FgLrc-zQ">! ! </iframe> ! </div></p>
This is an important feature for rich media integration.
What about non editables?
<p contenteditable=”true”><h1>Watch this</h1>
! <div class=”video” contenteditable=”false”>! ! <iframe src="//youtu.be/841FgLrc-zQ">! ! </iframe> ! </div></p> we synch them
This is an important feature for rich media integration.
What’s the payload?
sockjs.min.js 13,2kB
wikidocs.min.css 1,5kBwikidocs.min.js 47,2kB
You have HTML, we synch it.<html><body>! <div id="content-1234" ! ! contenteditable="true">! <h1>Hello World</h1>! <p>Wikidocs is here!</p>! </div></body></html>
<link rel="stylesheet" href="wikidocs.css"><script src="sockjs.min.js"></script><script src="wikidocs.min.js"></script>
var app = WD.App(accessToken);var editable =! document.getElementById('content-1234');app.Document('/channel-1234').bind(editable);
How can I see collaborators?
var app = WD.App(accessToken);var editable = document.getElementById('content-1234');var doc = app.Document('/channel-1234').bind(editable);
doc.on('subscribed', updateSubscribers);doc.on('unsubscribed', updateSubscribers);
function updateSubscribers(session) {! doc.subscriptions.forEach(function (session) {! ! // do magic...! });}
Wikidocs api provides additional features to provide a good user experience around real time collaborative editing.
Impl
emen
tatio
n eff
ort
know
ledg
e ne
cess
ary
oth
er s
ynch
Be smart. Focus on your valueand let Wikidocs synch for you.
We create value through sharing and collaboration.