SlideShare a Scribd company logo
1 of 24
Download to read offline
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;">&nbsp;</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,5kB
wikidocs.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.
Implementationeffort
knowledgenecessary
othersynch
Be smart. Focus on your value
and let Wikidocs synch for you.
We create value through sharing and collaboration.

More Related Content

More from Haymo Meran

Aloha editor keynote san francisco
Aloha editor keynote san franciscoAloha editor keynote san francisco
Aloha editor keynote san franciscoHaymo Meran
 
Aloha editor jQuery conf
Aloha editor jQuery confAloha editor jQuery conf
Aloha editor jQuery confHaymo Meran
 
Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote Haymo Meran
 
Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10Haymo Meran
 
Aloha Editor semantic concept
Aloha Editor semantic conceptAloha Editor semantic concept
Aloha Editor semantic conceptHaymo Meran
 
E2 wine and cheese
E2 wine and cheeseE2 wine and cheese
E2 wine and cheeseHaymo Meran
 
Aloha editor contenteditable useable
Aloha editor contenteditable useableAloha editor contenteditable useable
Aloha editor contenteditable useableHaymo Meran
 
Facebook marketing potential
Facebook marketing potentialFacebook marketing potential
Facebook marketing potentialHaymo Meran
 
Enterprise2punkt0
Enterprise2punkt0Enterprise2punkt0
Enterprise2punkt0Haymo Meran
 
Enterprise 2.0 Realtime V4
Enterprise 2.0   Realtime V4Enterprise 2.0   Realtime V4
Enterprise 2.0 Realtime V4Haymo Meran
 
Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20Haymo Meran
 
Networking on e-day
Networking on e-dayNetworking on e-day
Networking on e-dayHaymo Meran
 
Enterprise 2.0 portal
Enterprise 2.0 portalEnterprise 2.0 portal
Enterprise 2.0 portalHaymo Meran
 

More from Haymo Meran (15)

Aloha editor keynote san francisco
Aloha editor keynote san franciscoAloha editor keynote san francisco
Aloha editor keynote san francisco
 
Aloha editor jQuery conf
Aloha editor jQuery confAloha editor jQuery conf
Aloha editor jQuery conf
 
Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote
 
Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10
 
Aloha Editor semantic concept
Aloha Editor semantic conceptAloha Editor semantic concept
Aloha Editor semantic concept
 
E2 wine and cheese
E2 wine and cheeseE2 wine and cheese
E2 wine and cheese
 
Aloha editor contenteditable useable
Aloha editor contenteditable useableAloha editor contenteditable useable
Aloha editor contenteditable useable
 
Facebook marketing potential
Facebook marketing potentialFacebook marketing potential
Facebook marketing potential
 
Enterprise2punkt0
Enterprise2punkt0Enterprise2punkt0
Enterprise2punkt0
 
Enterprise 2.0 Realtime V4
Enterprise 2.0   Realtime V4Enterprise 2.0   Realtime V4
Enterprise 2.0 Realtime V4
 
Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20
 
Networking on e-day
Networking on e-dayNetworking on e-day
Networking on e-day
 
Enterprise 2.0 portal
Enterprise 2.0 portalEnterprise 2.0 portal
Enterprise 2.0 portal
 
E20 Keynote
E20   KeynoteE20   Keynote
E20 Keynote
 
Gpn4
Gpn4Gpn4
Gpn4
 

Recently uploaded

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Recently uploaded (20)

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

Wikidocs - Real time collaborative editing for HTML

  • 2. Realtime collaborative editing ★ though operation transformation (OT) ★ for your HTML content ★ with true WYSIWYG ★ for web and native
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. wikidocs api: create a new app or integrate smoothly in your existing system ★ Your app ★ Your users ★ Your access rules ★ We sync
  • 9. 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
  • 10. Nice, but what’s the real difference? vs vs
  • 11. Nice, but what’s the real difference? vs vs First break is a line break second a paragraph break.
  • 12. 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.
  • 13. 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;">&nbsp;</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
  • 14. 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>
  • 15. 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>
  • 16. 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.
  • 17. 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.
  • 18. 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.
  • 19. 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.
  • 20. What’s the payload? sockjs.min.js 13,2kB wikidocs.min.css  1,5kB wikidocs.min.js 47,2kB
  • 21. 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);
  • 22. 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.
  • 23. Implementationeffort knowledgenecessary othersynch Be smart. Focus on your value and let Wikidocs synch for you.
  • 24. We create value through sharing and collaboration.