Quill
Enable real-time co-editing for Quill.
Add the Codox JavaScript library and css files:
<script src="https://cdn1.codox.io/lib/2.x/api/wave.client.js" type="text/javascript"></script>
<link href="https://cdn1.codox.io/lib/2.x/css/wave.client.css" rel="stylesheet">
Add the following JavaScript block to your application to enable real-time co-editing for Quill. Replace the
apiKey field with your own, which you can get here.1
const editor = new Quill("#editor", {modules: {'toolbar': toolbar }, theme: "snow" });
2
3
const config = {
4
"app" : "quilljs",
5
"editor" : editor,
6
"docId" : "document_1",
7
"user" : {
8
"name" : "Joe Smith",
9
},
10
"apiKey" : "8a97c7db-5155-4245-9f9d-16e3dfd11ef2",
11
};
12
13
//start co-editing
14
const codox = new Codox();
15
codox.init(config);
The values for
docIdandusername should come from your document management service. Codox expects docIdto be globally unique across your service. Every co-editing session should have its distinct
codox object. That means if you are running multiple instances of Quill editor on the same page or with in the same application, there should be multiple instances of codox, one for each Quill editor instance or document fragment (note: each document fragment should be uniquely identifiable). The
config parameter is a JSON object with the following key-value pairsKey | | Value |
app | (required) | string |
docId | (required) | string |
user | (required) | object |
apiKey | (required) | string |
editor | (required) | Quill |
autoStart | (optional) | boolean |
stringThe static string value
'quilljs'stringA unique identifier for the document. In a content management service, this could for example be the resource identifier for the document.
objectA 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. stringQuill A reference to a Quill editor instance, in which the co-editing session should be bootstrapped.
booleanSet 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. Last modified 5d ago