add a callback which receives the editor instance after creation

README.rst

@@ -284,6 +284,56 @@ you can add ``CKEDITOR_5_USER_LANGUAGE=True`` to your django settings.
 Additionally you will have to list all available languages in the ckeditor
 config as shown above.
 
+Creating a CKEditor5 instance from javascript:
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+To create a ckeditor5 instance dynamically from javascript you can use the
+``ClassicEditor`` class exposed through the ``window`` global variable.
+
+  .. code-block:: javascript
+
+    const config = {};
+    window.ClassicEditor
+       .create( document.querySelector( '#editor' ), config )
+       .catch( error => {
+           console.error( error );
+       } );
+    }
+
+Alternatively, you can create a form with the following structure:
+
+  .. code-block:: html
+
+    <form method="POST">
+        <div class="ck-editor-container">
+            <textarea id="id_text" name="text" class="django_ckeditor_5" >
+            </textarea>
+            <div></div> <!-- this div or any empty element is required -->
+            <span class="word-count" id="id_text_script-word-count"></span>
+       </div>
+       <input type="hidden" id="id_text_script-ck-editor-5-upload-url" data-upload-url="/ckeditor5/image_upload/" data-csrf_cookie_name="new_csrf_cookie_name">
+       <span id="id_text_script-span"><script id="id_text_script" type="application/json">{your ckeditor config}</script></span>
+    </form>
+
+The ckeditor will be automatically created once the form has been added to the
+DOM.
+
+To access a ckeditor instance you can either get them through ``window.editors``
+
+  .. code-block:: javascript
+
+    const editor = windows.editors["<id of your field>"];
+
+or by registering a callback
+
+  .. code-block:: javascript
+
+    //register callback
+    window.ckeditorRegisterCallback("<id of your field>", function(editor) {
+      // do something with editor
+    });
+    // unregister callback
+    window.ckeditorUnregisterCallback("<id of your field>");
+
 
 Allow file uploading as link:
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

django_ckeditor_5/static/django_ckeditor_5/app.js

@@ -1,8 +1,12 @@
 import ClassicEditor from './src/ckeditor';
 import './src/override-django.css';
 
-
-let editors = [];
+window.ClassicEditor = ClassicEditor;
+window.ckeditorRegisterCallback = registerCallback;
+window.ckeditorUnregisterCallback = unregisterCallback;
+window.editors = {};
+let editors = {};
+let callbacks = {};
 
 function getCookie(name) {
     let cookieValue = null;
@@ -98,15 +102,16 @@ function createEditors(element = document.body) {
                 wordCountWrapper.innerHTML = '';
                 wordCountWrapper.appendChild(wordCountPlugin.wordCountContainer);
             }
-            editors.push(editor);
+            editors[editorEl.id] = editor;
+            if (callbacks[editorEl.id]) {
+                    callbacks[editorEl.id](editor);
+                }
         }).catch(error => {
             console.error((error));
         });
         editorEl.setAttribute('data-processed', '1');
     });
-
     window.editors = editors;
-    window.ClassicEditor = ClassicEditor;
 }
 
 /**
@@ -125,6 +130,25 @@ function getAddedNodes(recordList) {
         .filter(node => node.nodeType === 1);
 }
 
+/**
+ * Register a callback for when an editor with `id` is created.
+ *
+ * @param {!string} id - the id of the ckeditor element.
+ * @callback callback - the callback function to be invoked.
+ */
+function registerCallback(id, callback) {
+    callbacks[id] = callback;
+}
+
+/**
+ * Unregister a previously registered callback.
+ *
+ * @param {!string} id - the id of the ckeditor element.
+ */
+function unregisterCallback(id) {
+    callbacks[id] = null;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     createEditors();