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.

 const config = {
    docId    : "docId",
    user     : {
        name : "Joe Smith",
    },
    apiKey   : "7bdf58a1-e722-4868-bee9-b7e7c65a09b6",
  };

  tinymce.init({
    external_plugins : {
      wave : "https://cdn2.codox.io/waveTinymce/2.x/plugin.min.js"
    },
    wave   : config
  }

Enable codox 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. Codox expects docIdto be globally unique across your service.

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
const 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.

Client API