Enable Realtime Collaboration on Your App!
1 post
Page 1 of 1
In this tutorial I showed you all how I made the HTML OnLive Debugger.
TogetherJS makes real time collaboration easy! Therefore we're going to use this amazing plugin so we can have real time code collaboration for our text editor.
So first we're going to begin with the Codemirror snipplet.
There's many projects out there that are already using TogetherJS...
Wordpress Plugins
Liveweave (Code Playground)
.NET Fiddle (Code Playground)
Mozilla Popcorn (Video Editor)
DrawTogether (HTML5 Drawing Board)
HTML5 Blackboard
Mozilla's TogetherJS is nice and all, but it doesn't solve the problem for touch users.
After a bit of research I came across many methods of collaborative works. This one worked well for me.
CollabDraw
When it comes to collaboration the sky's the limit. Enjoy!
TogetherJS makes real time collaboration easy! Therefore we're going to use this amazing plugin so we can have real time code collaboration for our text editor.
So first we're going to begin with the Codemirror snipplet.
Code: Select all
Add the following plugin to your head tags...
<!DOCTYPE html>
<html>
<head>
<title>Codemirror: HTML5 Preview</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=9' />
<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://codemirror.net/lib/codemirror.js'></script>
<link rel='stylesheet' href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css" />
<script src='http://codemirror.net/javascripts/code-completion.js'></script>
<script src='http://codemirror.net/javascripts/css-completion.js'></script>
<script src='http://codemirror.net/javascripts/html-completion.js'></script>
<script src='http://codemirror.net/mode/javascript/javascript.js'></script>
<script src='http://codemirror.net/mode/xml/xml.js'></script>
<script src='http://codemirror.net/mode/css/css.js'></script>
<script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
<script src='http://codemirror.net/addon/edit/closetag.js'></script>
<script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
<script src='http://codemirror.net/addon/selection/active-line.js'></script>
<script src='http://codemirror.net/keymap/extra.js'></script>
<script src='http://codemirror.net/addon/fold/foldcode.js'></script>
<script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
<script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
<script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
<script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
<style type='text/css'>
.CodeMirror {
float: left;
width: 50%;
border: 1px solid black;
}
iframe {
width: 49%;
float: left;
height: 300px;
border: 1px solid black;
border-left: 0;
}
</style>
</head>
<body>
<div align='center'>
<button class='undo'>Undo</button>
<button class='redo'>Redo</button>
<button class='jquery'>Add JQuery</button>
<button class='bold'>Bold</button>
</div>
<textarea id='code' name='code'><!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
<style>p {font-family: monospace;}</style>
</head>
<body>
<p>Canvas pane goes here:</p>
<canvas id=pane width=300 height=200></canvas>
<script>
var canvas = document.getElementById('pane');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(250,0,0)';
context.fillRect(10, 10, 55, 50);
context.fillStyle = 'rgba(0, 0, 250, 0.5)';
context.fillRect(30, 30, 55, 50);
</script>
</body>
</html></textarea>
<iframe id='preview'></iframe>
<script type='text/javascript'>
// Append JS library to HTML <head>
function appendJSLib(txt) {
var textArea = editor.getValue();
var searchText = textArea.search('<head>');
if(searchText>0) {
txt = '<head>'+'\n'+txt;
var updatedTextArea = textArea.replace('<head>',txt);
editor.setValue(updatedTextArea);
}
else {
reset();
alert('WARNING! The <head> tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the new document of correct formatted');
txt = txt+textArea;
htmlEditor.setLine(0, txt);
return false;
}
}
// Add JQuery as JS Source
$('.jquery').click(function() {
txt = '<'+'script type=\'text/javascript\' src=\'http://code.jquery.com/jquery-latest.min.js\'>'+'</'+'script'+'>';
appendJSLib(txt);
});
// Undo/Redo Initiation
$('.undo').click(function() {
editor.undo();
});
$('.redo').click(function() {
editor.redo();
});
// Make selected text bold (If no text selected it adds the code and focus's cursor to center of tag)
$('.bold').click(function() {
// For codemirror & center cursor
var selected_text = editor.getSelection(); // Need to grab the Active Selection
console.log(selected_text); // Active Selection
editor.replaceSelection('', editor.getCursor());
editor.replaceRange('<strong></strong>', editor.getCursor());
editor.focus();
var str = '</strong>';
var mynum = str.length;
var start_cursor = editor.getCursor(); // Need to get the cursor position
console.log(start_cursor); // Cursor position
var cursorLine = start_cursor.line;
var cursorCh = start_cursor.ch;
// Code to move cursor back [x] amount of spaces. [x] is the data-val value.
editor.setCursor({line: cursorLine , ch : cursorCh -mynum });
editor.replaceRange(selected_text, editor.getCursor());
editor.focus();
});
var delay;
// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: "text/html",
tabMode: 'indent',
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
dragDrop : true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
// Live preview
editor.on('change', function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
document.title = $('#preview').contents().find('title').html();
if ( document.title === 'undefined' ) {
document.title = 'App name';
}
preview.close();
}
setTimeout(updatePreview, 300);
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
var reader = new FileReader();
reader.onload = function(event) {
editor.setValue( event.target.result );
}
reader.readAsText(files[0],"UTF-8");
}
</script>
</body>
</html>
Code: Select all
Add a button, and call TogetherJS...
<script src='https://togetherjs.com/togetherjs-min.js'></script>
Code: Select all
I personally hate calling my Javascript in my HTML. I like keeping my code nice and neat. Here's how I called TogetherJS...
<button id="collab" onclick="TogetherJS(this); return false;">Team Up</button>
Code: Select all
If you need any help on how to use TogetherJS please revert to the Documentation, and read up more about it on Github.var App = {};
App.run = function() {
(function init() {
var shareBtn = document.getElementById("collab");
// share button should trigger TogetherJS
shareBtn.addEventListener("click", function(e) {
e.preventDefault();
TogetherJS(this);
}, false);
})();
}
window.addEventListener("load", function() {
App.run();
}, false);
TogetherJSConfig_siteName="Basic Codemirror Demo";
TogetherJSConfig_toolName="Team Up";
TogetherJSConfig_dontShowClicks = true;
TogetherJSConfig_suppressJoinConfirmation = true;
TogetherJSConfig_disableWebRTC = true;
TogetherJSConfig_includeHashInUrl = true;
TogetherJSConfig_youtube = false;
TogetherJSConfig_on = {
ready: function () {
var share = document.getElementById("collab");
share.style.display = "none";
},
close: function() {
var share = document.getElementById("collab");
share.style.display = "inline-block";
}
};
There's many projects out there that are already using TogetherJS...
Wordpress Plugins
Liveweave (Code Playground)
.NET Fiddle (Code Playground)
Mozilla Popcorn (Video Editor)
DrawTogether (HTML5 Drawing Board)
HTML5 Blackboard
Mozilla's TogetherJS is nice and all, but it doesn't solve the problem for touch users.
After a bit of research I came across many methods of collaborative works. This one worked well for me.
CollabDraw
When it comes to collaboration the sky's the limit. Enjoy!
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023