Question

ckeditor from id not loading in insertAdjacentHTML

Posted August 27, 2021 73 views
DjangoJavaScript

Actually i want to make my blog comment like digitalocean comment. using ckeditor.
i have did all of it but. in reply textarea is showing. and its not loading ckeditor in replay textarea. i dont know why.

I want to have ckeditor comment box inside replay textarea and its not loading.
every thing load textarea loads but ckeditor not loading with that id
i think it loads once at page render.

  1. Before click on replay https://i.stack.imgur.com/c9OMA.png

enter image description here

  1. after clicking on replay button form appears https://i.stack.imgur.com/mPhH7.png

enter image description here

  1. my ckeditor main comment form https://i.stack.imgur.com/cdLA0.png

enter image description here


my comment form javascript

            <script>
            function formExit() {
                document.getElementById('newForm').remove();
            }

            function myFunction(id) {

                if (document.contains(document.getElementById("newForm"))) {
                    document.getElementById("newForm").remove();
                }

                var a = document.getElementById(id);
                a.insertAdjacentHTML('afterend', ' \
                <form id="newForm" method="post"> \
                    <div class="re_form"> \
                    <h2>Replay:</h2> \
                    <button type="button" class="btn re_form_close bg-red" onclick="formExit()"> \
                        Close \
                    </button> \
                    <p> \
                        <select name="parent" class="d-none" id="id_parentt"> \
                            <option value="' + id + '" selected="' + id + '"></option> \
                        </select> \
                    </p> \
                    <p> \
                         \
                        <textarea placeholder="Comment here" name="body" id="id_body" class="re_form_textarea"></textarea>\
                    </p> \
                    {% csrf_token %} \
                    <button type="submit" class="btn btn-primary btn-lg btn-block bg-olive">Submit</button> \
                    </div> \
                    </form> \
                ');
            }


            $('#myForm').trigger("reset");
        </script>

at this above line see id=“id_body” here ckeditor loads
but it showing empty textbox without ckeditor

<textarea placeholder="Comment here" name="body" id="id_body" class="re_form_textarea"></textarea>\

my replay form

<button class="bg-yellow btn" onClick="myFunction({{ node.id }})">Reply</button>
Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!