TinyMCE

Enable real-time co-editing for TinyMCE.

Overview

Add the following JavaScript block to your application to enable real-time co-editing for TinyMCE.

var config = {
docId : "docId",
user : {
name : "Joe Smith",
},
apiKey : "7bdf58a1-e722-4868-bee9-b7e7c65a09b6",
};
tinymce.init({
external_plugins : {
wave : "https://cdn2.codox.io/waveTinymce/plugin.min.js"
},
wave : config
}

Enable wave through TinyMCE's external_plugins. To start a co-editing session, supply a configuration object to the plugin.

The values for docIdandusername should come from your document management service. Wave expects docIdto be globally unique across your service.

You can use the demo API key 7bdf58a1-e722-4868-bee9-b7e7c65a09b6 without a subscription. It will allow co-editing sessions with two users per session and 100 sessions per month. To support more users per collaboration session, please sign up for an account.

For general information about TinyMCE plugins, please click here.

Multiple Instances

Every co-editing session should have its distinct codox object. That means if you are running multiple instances of TinyMCE editor on the same page or with in the same application, there should be multiple instances of codox, one for each TinyMCE editor instance or document fragment (note: each document fragment should be uniquely identifiable).

You may want to directly access the codox object associated with each editor to register and respond to session and error events as follows:

// access the codox instance
var codox = tinymce.get('editor_id').plugins.wave.codox;
// register session handlers
codox.on("content_changed", function(data){
});
// register error handlers
codox.on("error", function(data){
});

Parameters

The config parameter is a JSON object with the following key-value pairs:

Summary

Key

Value

docId

(required)

string

user

(required)

object

apiKey

(required)

string

autoStart

(optional)

boolean

Additional configration paramaters can be found here

Description

docId

string

A unique identifier for the document. In a content management service, this could for example be the resource identifier for the document.

user

object

A user meta-data object.

Key

Value

name

(optional)

string

email

(optional)

string

avatar

(optional)

string

id

(optional)

string

For a content management service, this field should be set for each logged-in user based on their credentials. The value of user.name will be used to render the default text-based initials avatar. To create an image-based avatar, set user.avatar to the path of the image resource.

apiKey

string

The API key for the TinyMCE integration. You can obtain a key from your account.

autoStart (optional)

boolean

Set to true, to start the co-editing session automatically on init(config). Set to false to initialize but delay start the co-editing (see the start() client API). Default setting is true.