About Aloha Wikidocs

Aloha Wikidocs is a service that provides collaborative online WYSIWYG editing for HTML5. There are some apps like Google docs or Etherpad, which provide similar functionality such as collaborative content editing. Aloha Wikidocs is different. Not only can you collaborate on the same piece of content, you can collaborate on HTML5 content in WYSIWYG mode. Aloha Wikidocs is also a simple API that allows you to easily integrate collaborative online HTML5 WYSIWYG editing in your own app. It's as simple as that: you can edit HTML5 content collaboratively. As far as we know no one has ever implemented such a functionality. Google says "..and HTML makes OT (Operational Transforms) difficult if not impossible..." Well, we did it. It was freaking hard, but here you are!

If you like what you see push the button and post your "hang loose" picture to our facebook page.
Your image could appear here :)

Try Aloha Wikidocs

Click in the left box below and edit the content simultaneously with other users connected with this page.

<script>
	// make content editable
	$('#content').aloha();
</script>
		

No user is editing.

Tell your friends about this.

Get Started

Read this before you start

Aloha Wikidocs is in a very early stage. It may not function properly, the service may stop or functionality and API may change without prior notification. Anyway, we encourage you to try it out and write your test apps. Please give us feedback via our facebook page. We give our best to improve the service and keep you updated.

Aloha Editor and Aloha Wikidocs

Aloha Wikidocs works within Aloha Editor. When you load Aloha Wikidocs you get Aloha Editor (aloha.js and aloha.css) with all its common and extra plugins and additionally the Aloha Wikidocs plugin. We modified Aloha Editor to get it working for Aloha Wikidocs. This changes will be merged in Aloha Editor and you may then use your own instance of Aloha Editor. For more information about configuring Aloha Editor and loading your own plugins check the Aloha Editor guides.

Get your API key

Make editables collaborative

To make an Aloha Editor Editable collaborative you have to provide the a signed request. You can provide the signed request as WIKIDOCS_SIGNED_REQUEST in the global Javascript namespace. The signed request is a signature and an encoded payload. The raw payload is a json string and consists of a timestamp, your app id and the content ids. All Aloha Wikidocs ids on which the user should be allowed to collaborate need to be part of the payload and signed. You can start collaboration by setting the data-wikidocs-id or by calling collaborate("the-content-id") on an Aloha Editor Editable. You should build the signature on the server side with the technology of your choice to protect your app secret. Our example is implemented in php.

<?php 
define("APP_ID", "YOUR_APP_ID");
define("APP_SECRET", "YOUR_APP_SECRET");

function signRequest($params) {
	$params["time"] = time();
	$params["appId"] = APP_ID;
	$payload = base64UrlEncode(json_encode($params));
	$rawSignature = hash_hmac("sha256", $payload, APP_SECRET, $raw = true);
	return base64UrlEncode($rawSignature) . "." . $payload;
}

function base64UrlEncode($data) {
	return strtr(base64_encode($data), "+/", "-_");
}
?>
<!-- Load Aloha Wikidocs -->
<script src="http://aloha-wikidocs.com/aloha-wikidocs.js" data-aloha-plugins="common/format, common/table, common/list, common/link, common/highlighteditables, common/contenthandler, common/paste, common/commands, common/image, extra/cite, extra/metaview, wikidocs/wikidocs"></script>

<h1 id="title" data-wikidocs-id="title">Oba Woazn damma in Hoazn.</h1>
<div id="content">und de Ruabn und den Gugaruz</div>

<script>
WIKIDOCS_SIGNED_REQUEST = "<?php echo signRequest(array('auth' => array('collaborate' => array('title', 'content'), 'publish' => array('*'), 'subscribe' => array('*')))); ?>";
$('#title').aloha();
$('#content').aloha().collaborate('content');
</script>
    

Using channels to communicate with other users

You can use the Aloha Wikidocs pubsub mechanism to communicate to other members connected to you app. There are 2 functions available: subscribe and publish. Both functions take a channel name as first parameter. Channel names are string identifiers where you can publish messages and subscribe to listen for messages. Allowed characters in channelnames are ^[a-zA-Z0-9_-]+(/[a-zA-Z0-9_-]+)*$.

The following examples shows how you can broadcast a message to users subscribed to a channel with the name "page/42".

Aloha.ready( function() {
  Aloha.require( ['wikidocs/wikidocs-plugin'], function( Wikidocs ) {
	  		
    // When connected send a message to all members connected to the channel "page/42"
    Wikidocs.publish( 'page/42', { msg: "Sellwoll, iatz kemma buggln." } );
		
    // listen to messages related to the channel "page/42"  		
    Wikidocs.subscribe( 'page/42', function( data ) ) {
      if ( data.msg ) {
        alert( data.msg );
      }
    });
  });
});
    

Known Issues

• some things are not yet working correctly