How to Initialize Quill Editor after cloning to dom

Question

I have a rather complex page set up where users add blocks dynamically to the dom. The block has a quill editor in it and this works correctly. However I also need to be able to edit the content once it's copied to the area of the dom.

i.e. click "add page" slides down a form with a quill editor. Saving this copies the form to a new section of the page and clears the original form. Now when clicking the edit icon the copied form slides down and they should be able to edit. However Quill Editor does not load. I can see the copied elements in the dom with display:none - easy enough to unhide, but doing so and I can see the div and toolbar but can't edit.

So I figure I need to re-initialize Quill on the cloned div but am stuck.

Here is my code for sliding down the cloned content (which works but doesn't allow me to edit via Quill.

Before putting in Quill I had a textarea which worked fine, but I don't expect users to be able to write html so moved to Quill.

// edit already saved page item
$('.inserted').on('click', '.page-item .edit-image-copy', function(e)
{
    e.preventDefault();

    // slide open form to edit.
    $(this)
        .closest('.page-item')
        .find('.page-take')
        .slideToggle()
        .children()
        .toggle();

    // commenting this stops quill from being viewable
    // even so you can't edit text on the cloned Editor
    // need to somehow initialize it.
    $(this)
        .closest('.page-item')
        .find('.Qeditor, .ql-toolbar')
        .toggle();

    // how do I pass the value of this into quillTarget and use as variable in var quill  new Quill(quillTarget, Qoptions)
    var quillTarget = $(this).closest('.page-item').find('.Qeditor');

    console.log('quillTarget is ' + quillTarget);

    var quill = new Quill($(this).closest('.page-item').find('.Queditor'), Qoptions);
});

Cloned Div is the .page-item div in this html block

<div class="inserted ui-sortable" id="sortable">
    <div class="item page-item">
        <div class="handle-container">
            <i aria-hidden="true" class="fa fa-bars"></i>
        </div>
        <div class="text-icon">
            <i aria-hidden="true" class="fa fa-file-text"></i>
        </div>
        <div class="text-page">
            <p>Text Page</p>
        </div>
        <div class="imageTitleForm">
            <p class="edit-icons">
                <a class="edit-image-copy" href="#"><span class="icon"><img alt="" src="/images/pencil_icon.png"></span></a><a class="remove" href="#"><span class="icon"><img alt="" src="/images/x_icon.png"></span></a>
            </p>
        </div>
        <div class="page-take" style="display: block;">
            <!--Title-->
            <div class="form-group" style="display: block;">
                <label class="control-label" for="page-title">Title</label> <input class="form-control input-md page-title" id="textinput" name="page-title" placeholder="Title" type="text">
            </div><!-- Copy-->
            <div class="ql-toolbar ql-snow" style="display: none;">
                <span class="ql-formats"><span class="ql-header ql-picker"><span class="ql-picker-label"><svg viewbox="0 0 18 18">
                <polygon class="ql-stroke" points="7 11 9 13 11 11 7 11"></polygon>
                <polygon class="ql-stroke" points="7 7 9 5 11 7 7 7"></polygon></svg></span><span class="ql-picker-options"><span class="ql-picker-item" data-value="2"></span><span class="ql-picker-item ql-selected"></span></span></span><select class="ql-header" style="display: none;">
                    <option value="2"></option>
                    <option selected="selected"></option>
                </select></span><span class="ql-formats"><button class="ql-bold" type="button"><span class="ql-formats"><svg viewbox="0 0 18 18">
                <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
                <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path></svg></span><button class="ql-italic" type="button"><svg viewbox="0 0 18 18">
                <line class="ql-stroke" x1="7" x2="13" y1="4" y2="4"></line>
                <line class="ql-stroke" x1="5" x2="11" y1="14" y2="14"></line>
                <line class="ql-stroke" x1="8" x2="10" y1="14" y2="4"></line></svg></button><button class="ql-underline" type="button"><svg viewbox="0 0 18 18">
                <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path>
                <rect class="ql-fill" height="1" rx="0.5" ry="0.5" width="12" x="3" y="15"></rect></svg></button></button></span>
            </div>
            <div class="Qeditor ql-container ql-snow" style="display: none;">
                <div class="ql-editor ql-blank" contenteditable="true" data-placeholder="Enter your copy here...">
                    <p><br></p>
                </div>
                <div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
                <div class="ql-tooltip ql-hidden">
                    <a class="ql-preview" href="about:blank" target="_blank"></a><input data-formula="e=mc^2" data-link="quilljs.com" data-video="Embed URL" type="text"><a class="ql-action"></a><a class="ql-remove"></a>
                </div>
            </div>
            <p class="buttons" style="display: block;">
                <button class="btn btn-primary save-button" href="#">Save</button> <button class="btn btn-primary">Cancel</button>
            </p>
            <p class="close-btn close-title-page" style="display: block;">
                <a href="#">Close Page</a>
            </p>
        </div>
    </div>
</div>    

Please advise.

Answer 1

Quill expects a DOM element or ID string. You are passing a jQuery object. Try to use this instead:

var quillTarget = $(this).closest('.page-item').find('.Qeditor').get(0);

Example:

//var el = $('#editor-container');
var el = $('#editor-container').get(0);
var quill = new Quill(el, {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

#editor-container {
  height: 375px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdn.quilljs.com/1.1.8/quill.js"></script>
<link href="//cdn.quilljs.com/1.1.8/quill.snow.css" rel="stylesheet"/>

<div id="editor-container">
</div>