Mathquill4quill for Multi Editor (more than 2) on same page

[purnomosejati]

Hi @c-w

I am having difficulties on inplementing Mathquill4quill for 4 editors simultaneously. The first editor works fine but, the rest are not working as expected.

Let me know if the Mathquill4quill only can be used for single editor at one time only. And please suggest If it is able for multi editor.

Best regards

Purnomo Sejati

[c-w]

Thanks for reaching out @purnomosejati. Could you provide some more details on your setup and the issues you're seeing?

I tried reproducing errors with multiple editors on the same page using the demo site in this repository and it seems to work fine for me, e.g. see the recording below showing the setup with two editors:

For reference, here is the diff that I used to set up the two editors:

diff --git a/index.html b/index.html
index 4c7e2ab..b73420a 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,8 @@
           data-name="displayHistory"
           data-value="true">
       </label>
+
+      <div id="editor2"></div>
     </main>

     <footer>
diff --git a/index.js b/index.js
index 716b4ad..d2fe2d0 100644
--- a/index.js
+++ b/index.js
@@ -43,5 +43,8 @@
     const enableMathQuillFormulaAuthoring = window.mathquill4quill();
     const quill = new Quill("#editor", quillOptions);
     enableMathQuillFormulaAuthoring(quill, options);
+
+    const quill2 = new Quill("#editor2", quillOptions);
+    enableMathQuillFormulaAuthoring(quill2, options);
   });
 })(window.jQuery, window.Quill);

[purnomosejati]

Thanks for reaching out @purnomosejati. Could you provide some more details on your setup and the issues you're seeing?

I tried reproducing errors with multiple editors on the same page using the demo site in this repository and it seems to work fine for me, e.g. see the recording below showing the setup with two editors:

For reference, here is the diff that I used to set up the two editors:

diff --git a/index.html b/index.html
index 4c7e2ab..b73420a 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,8 @@
           data-name="displayHistory"
           data-value="true">
       </label>
+
+      <div id="editor2"></div>
     </main>

     <footer>
diff --git a/index.js b/index.js
index 716b4ad..d2fe2d0 100644
--- a/index.js
+++ b/index.js
@@ -43,5 +43,8 @@
     const enableMathQuillFormulaAuthoring = window.mathquill4quill();
     const quill = new Quill("#editor", quillOptions);
     enableMathQuillFormulaAuthoring(quill, options);
+
+    const quill2 = new Quill("#editor2", quillOptions);
+    enableMathQuillFormulaAuthoring(quill2, options);
   });
 })(window.jQuery, window.Quill);

Thanks for your reply.

My code was wrong and I solved by what you have mentioned here.

And now, I can make several editors simultaneously using this function:

var openquill = function($, Quill, editordiv, formuladiv) {
        $(document).ready(() => {
            var quill = new Quill(editordiv, {
                modules: {
                    formula: true,
                    toolbar: [
                        ['formula']
                    ]
                },
                theme: 'snow'
            });
            option["operators"] = JSON.parse($(formuladiv).attr("data-value"));

            var enableMathQuillFormulaAuthoring = mathquill4quill();
            enableMathQuillFormulaAuthoring(quill, option);
        });
    };

    openquill(window.jQuery, window.Quill, '#editor2', '#formulaTemplate2');
    openquill(window.jQuery, window.Quill, '#editor3', '#formulaTemplate3');

Again, thank you for your reply and time.. This mathquill4quill is amazing!

Regards