Issue with Vue.js

[kavacsgit]

Describe the bug When I try to use KEditor in Vue it keeps giving me this bug: Uncaught TypeError: t is undefined d renderSnippet.js:27 h renderSnippets.js:21 ...

in FireFox, in Chrome: renderSnippet.js:28 Uncaught TypeError: Cannot read property 'indexOf' of undefined at t.d (renderSnippet.js:28) at HTMLDivElement.<anonymous> (renderSnippets.js:21)

Version The latest version I downloaded from github a week ago. And I use @vue/cli 4.5.4 with node v12.18.3.

To Reproduce Steps to reproduce the behavior:

1. Put KEditor's files in the public folder of VUE.
2. Put the necessary script tags for KEditor into the public/index.html
3. Put the following code into the "mounted() {}" method of a view you would like to use it in: let keditorCustomScript = document.createElement('script'); keditorCustomScript.setAttribute('src', '/assets/keditor/js/custom.js'); keditorCustomScript.setAttribute('data-keditor', 'script'); document.head.appendChild(keditorCustomScript);
4. See error

Expected behavior The "header" of the editor shows and I can even make the iframe displayed with a little css modification, but the snippets are not available. When I try to add new they are blank.

Desktop (please complete the following information):

• OS: Lubuntu 20.04
• Browser: FireFox, Chrome
• Version: latest

Additional context I tried to modify the renderSnippet.js but it's weird, because anything I write in it doesn't apply, like it's cached.

Thank you for your help in advance.

[kavacsgit]

Meanwhile I've managed to figure out that keditor.js throws the error from line 340 to 346 if I'm not mistaken. This:

d = function(t, n, e, o, a, i) { var r = this.options, l = s(), T = '\n <section\n class="'.concat(c.UI, " ").concat(c.SNIPPET, " ").concat("container" === t ? c.SNIPPET_CONTAINER : c.SNIPPET_COMPONENT, '"\n data-snippet="#').concat(l, '"\n data-type="').concat(t, '"\n data-keditor-title="').concat(n, '"\n data-keditor-categories="').concat(o, '"\n >\n <span class="').concat(c.SNIPPET_INNER, '">\n <span class="').concat(c.SNIPPET_PREVIEW, '" style="background-image: url(\'').concat(e, '\')"></span>\n <span class="').concat(c.SNIPPET_TITLE, '" title="').concat(n, '">').concat(n, "</span>\n </span>\n </section>\n "), E = '<script id="'.concat(l, '" type="text/html" ').concat(i.join(" "), ">").concat(a, "<\/script>"); return o = o.split(r.snippetsCategoriesSeparator), "container" === t ? this.categoryContainer = this.categoryContainer.concat(o) : -1 !== t.indexOf("component") && (this.categoryComponent = this.categoryComponent.concat(o)), [T, E] },

Somehow 't' in undefined.

[kavacsgit]

Never mind.

I have figured it out.

In keditor.js there's an ajax call that tries to reach the snippetsUrl which is a relative path for the snippet html. And since Vue handles these urls it needs to be changed to the path of the public folder.