Issue with adding html template with js

Question

I am trying to add my html website code from data-prototype:

<div id="accordion" data-prototype='
<div class="card-body">
    <textarea id="solution_answers___name___content" name="solution[answers][__name__][content]" required="required"></textarea>

    <script type="text/javascript">
        var CKEDITOR_BASEPATH = "/bundles/fosckeditor/";
    </script>
    <script type="text/javascript" src="/bundles/fosckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        if (CKEDITOR.instances["solution_answers___name___content"]) { 
            CKEDITOR.instances["solution_answers___name___content"].destroy(true); 
            delete CKEDITOR.instances["solution_answers___name___content"]; 
        }

    </script>
</div>'></div>

As you can see, there is also some js code from ckeditor.

When I try to add it with jquery:

let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
let $root = $(el);

$root.append(template);

Everything works fine, I mean there is no erros in console.

When I try to add it with vanilla js:

let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
const scriptEl = document.createRange().createContextualFragment(template);
el.append(scriptEl);

In dev console, I am getting error:

Uncaught ReferenceError: CKEDITOR is not defined

If I execute the same script one more time, the error is gone, and everything works as expected.

Does someone know, why I am getting that error?

Here is the content of /bundles/fosckeditor/ckeditor.js

Answer 1

It seems like the error is not about you trying to add this html code to your site. You should define CKEDITOR as a const let or var (I don't recomend the third) instead using OR and assign it to the window object.

const CKEDITOR = //...