Embed Size (px)
DESCRIPTION
Wikidocs provides a state of the art globally unique real time collaborative editing API for HTML. No more a huge amount of time, resources and knowledge is necessary to enable real time collaborative editing for HTML. In less than 1h an average web developer can make almost any WYSIWYG editor collaborative. The technology works on HTML for desktop, tablet, mobiles and on native applications. Wikidocs offers a service, installation in your own cloud, or OEM components to integrate in your software.
Citation preview
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.
