How to use formula in vue-quill-editor?

[ljy19891118]

I'm trying to use vue-quill-editor in my project, which is a webpack project. After I mount it as a component, everything looks well, but the formula button is not shown. I checked the document of quill, it said:

Formula - formula (requires KaTex)

So I import KaTex in a vue file like this:

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
import "katex/dist/katex.js";

However, it still not work.

I try add "formula" option like this:

      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ["image"],
            ["formula"]
          ]
        }
      },

The button of formula is shown, but it isn't work correctly. And the error report:

Uncaught TypeError: Cannot read property 'render' of undefined
    at Function.create (quill.js:10926)
    at Object.create (quill.js:183)
    at Block.ContainerBlot.insertAt (quill.js:3407)
    at BlockBlot.insertAt (quill.js:7406)
    at Block.insertAt (quill.js:855)
    at Scroll.ContainerBlot.insertAt (quill.js:3404)
    at ScrollBlot.insertAt (quill.js:7145)
    at Scroll.insertAt (quill.js:4252)
    at Editor.insertEmbed (quill.js:2606)
    at quill.js:1379

[NULLx76]

I am having the exact same problem, if you find a solution I would like to know

[johanvogelzang]

Having the same problem..

vue2-editor.js?b3e9:1 Uncaught TypeError: Cannot read property 'render' of undefined
    at Function.value (vue2-editor.js?b3e9:1)
    at Object.r [as create] (vue2-editor.js?b3e9:1)
    at e.insertAt (vue2-editor.js?b3e9:1)
    at e.insertAt (vue2-editor.js?b3e9:1)
    at e.value (vue2-editor.js?b3e9:1)
    at e.insertAt (vue2-editor.js?b3e9:1)
    at e.insertAt (vue2-editor.js?b3e9:1)
    at e.value (vue2-editor.js?b3e9:1)
    at t.value (vue2-editor.js?b3e9:1)
    at eval (vue2-editor.js?b3e9:1)

[felixfrtz]

Same problem here.

[gsern1]

Same problem here as well. Has anybody found a solution?

[felixfrtz]

I'm getting the strong feeling that this project is abandoned.

[gsern1]

Yes, it looks like it's abandoned. The thing is there are some example online where this formula insertion is working. So there must be a workaround in this current version.

[LokeshLakhera]

Same Problem here

[ChikuwaJB]

I found solution about this issue.

Add few lines to import katex module to component file.

import katex from 'katex';
import 'katex/dist/katex.min.css';

And add below lines to 'mounted' methods.

mounted() {
  window.katex = katex;
}

[gsern1]

I found solution about this issue.

Add few lines to import katex module to component file.

import katex from 'katex';
import 'katex/dist/katex.min.css';

And add below lines to 'mounted' methods.

mounted() {
  window.katex = katex;
}

Thanks, it works perfectly!

[wangxdmm]

// vue.config.js
// configureWebpack
plugins: [
      new Webpack.ProvidePlugin({
        'window.Quill': ['quill'],
        'window.katex': ['katex'],
      }),
    ],

[mardonovshermuhammad]

dfdfgdfgdfgdfg