Integration of Free & Open Source Real-Time Collaborative Editors in third party applications

Integration of Free & Open Source Real-Time Collaborative Editors in third party applications

My project is to develop a Collaborative Editors module for Drupal, which provide various Plugins for Real Time Collaborative Editors. So this blog aims at my research and understanding of various ways to integrate free and open source real-time collaborative editors in the third party application.

What are Collaborative Editors?

A collaborative editor is a form of collaborative software application that allows several people to edit a document or text using different computers, a practice called collaborative editing.

Types of Collaborative Editors

There are two types of collaborative editing: real-time and non-real-time. In real-time collaborative editing, users can edit the same file simultaneously, whereas in Non-real-time collaborative editing, the users do not edit the same file at the same time (similar to revision control systems). Collaborative real-time editors generally permit both the above modes of editing in any given instance.

Real Time Collaborative Editors

After exploring many Collaborative Editors I found 3 Real Time Collaborative Editors which are Free, Open Source and have API or any other feature to integrate with other applications.

1. Etherpad

Etherpad allows you to edit documents collaboratively in real-time, much like a live multiplayer editor e.g Google Docs that runs in your browser. All etherpad’s instances provide access to all data through a well-documented API and support import/export to many major data exchange formats. And there are tons of etherpad plugins that allow you to customize your instance to suit your needs.

Etherpad provides its HTTP API client library in PHP as a composer package which can be installed using command 

composer require 0x46616c6b/etherpad-lite-client

This client library is used to call Etherpad API in an Object Oriented way.

Also Etherpad provides its jQuery Plugin which easily allows us to embed and access a pad from Etherpad in a web page. The plugin injects the pad contents into a div using iframes. It can also read the contents of a Pad and write it to a div.

Here is a mockup of my proposed workflow to integrated Etherpad in Drupal. Information about all the etherpad method used can be found here.

Workflow of Etherpad Integration in Drupal

 

2. Google Docs

Google Docs is a cloud-based document solution with real-time collaboration and powerful tools to compose, edit, and share documents.. It provides various features like comment on the content (text, image etc.), live chat etc. which ease our work.

After deeper research, I found 3 ways to integrate Google Docs in third-party applications. These ways are as follow:-

(i) Add On

Google Docs add-ons work similarly to how a browser extension works. They are a third-party app that you install to Google Docs to gain additional features i.e. we can extend Docs with add-ons that build customized workflow improvements, establish connectivity to third-party systems

Here are a few things you can do with an add-on that extends Google Docs:

  1. We can read, edit, visualize, and format text in Google Docs using the built-in Apps Script Document service. The service also lets you create and modify tables, images, drawings, and equations appearing in Google Docs.
  2. We can create custom menus and define multiple custom dialogs and sidebars interfaces using standard HTML and CSS.
  3. We can use add-on triggers to run specified functions when certain triggering events occur.

(ii) Google Docs API

In PHP Google Client Library is a composer package which can be installed with the command

composer require google/apiclient:^2.0

We can use Google Client Library to call Google Docs API. In this process in which a person will click on a link from which he will be redirected google's authentication page asking him to grant access to his google doc's document

Sample Code is as follows

<?php
require __DIR__ . '/vendor/autoload.php';

/**
 * Returns an authorized API client.
 * @return Google_Client the authorized client object
 */
function getClient()
{
    $client = new Google_Client();
    $client->setApplicationName('Google Docs API PHP Quickstart');
    $client->setScopes(Google_Service_Docs::DOCUMENTS_READONLY);
    $client->setAuthConfig('credentials.json');
    $client->setAccessType('offline');

    // Load previously authorized credentials from a file.
    $credentialsPath = expandHomeDirectory('token.json');
    if (file_exists($credentialsPath)) {
        $accessToken = json_decode(file_get_contents($credentialsPath), true);
    } else {
        // Request authorization from the user.
        $authUrl = $client->createAuthUrl();
        printf("Open the following link in your browser:\n%s\n", $authUrl);
        print 'Enter verification code: ';
        $authCode = trim(fgets(STDIN));

        // Exchange authorization code for an access token.
        $accessToken = $client->fetchAccessTokenWithAuthCode($authCode);

        // Store the credentials to disk.
        if (!file_exists(dirname($credentialsPath))) {
            mkdir(dirname($credentialsPath), 0700, true);
        }
        file_put_contents($credentialsPath, json_encode($accessToken));
        printf("Credentials saved to %s\n", $credentialsPath);
    }
    $client->setAccessToken($accessToken);

    // Refresh the token if it's expired.
    if ($client->isAccessTokenExpired()) {
        $client->fetchAccessTokenWithRefreshToken($client->getRefreshToken());
        file_put_contents($credentialsPath, json_encode($client->getAccessToken()));
    }
    return $client;
}

/**
 * Expands the home directory alias '~' to the full path.
 * @param string $path the path to expand.
 * @return string the expanded path.
 */
function expandHomeDirectory($path)
{
    $homeDirectory = getenv('HOME');
    if (empty($homeDirectory)) {
        $homeDirectory = getenv('HOMEDRIVE') . getenv('HOMEPATH');
    }
    return str_replace('~', realpath($homeDirectory), $path);
}

// Get the API client and construct the service object.
$client = getClient();
$service = new Google_Service_Docs($client);

// Prints the title of the requested doc:
// https://docs.google.com/document/d/195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE/edit
$documentId = '195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE';
$doc = $service->documents->get($documentId);

printf("The document title is: %s\n", $doc->getTitle());

(iii) Scrapper

Google Docs allows us to convert the document in a web page. steps to do this are as follow:-

  1. Open your desired Google Docs document
  2. Goto File > Publish to wen
  3. A dialogue box will open, select the "Publish" button
  4. A URL will get displayed which is a web version of this document

Now we can further use the web scrapping technique to get the body and title of the web page (web version of the document).

 

3. Microsoft Office 365 Word

It is also a cloud-based application like Google Docs which allow Real Time Collaborative editing of content.

In my research, I found 2 ways to integrate Microsoft Office 365 Word in third-party application like Drupal. These ways are as follow:-

(i) Add-in

Like Add-on in Google Docs, Microsoft Office 365 Word allows add-in to extend the functionality of Word.

(ii) Scrapper

Like Google Docs,  Microsoft Office 365 Word also allows us to convert the document in a web page. steps to do this are as follow:-

  1. Open your desired Microsoft Office 365 Wor document
  2. Goto File > Transform > Transform to web page
  3. A dialogue box will open from which select desired web template for this document
  4. A URL will get generated which is a web version of this document

Now we can further use the web scrapping technique to get the body and title of the web page (web version of the document).