Как инициализировать редактор Quill после клонирования в dom

Question

У меня довольно сложная страница, в которой пользователи динамически добавляют блоки к блоку. В блоке есть редактор пера, и это работает правильно. Однако мне также нужно иметь возможность редактировать содержимое после его копирования в область dom.

i.e нажмите кнопку «Добавить страницу», чтобы скрыть форму с помощью редактора пера. Сохранение этой копии формы в новый раздел страницы и очистка оригинальной формы. Теперь, щелкнув значок редактирования, скопированная форма сместится вниз, и они должны быть в состоянии редактировать. Однако редактор Quill не загружается. Я вижу скопированные элементы в dom с дисплеем: none - достаточно легко отобразить, но это так, и я могу видеть div и панель инструментов, но не могу редактировать.

Поэтому я считаю, что мне нужно повторно инициализировать Quill на клонированном div, но я застрял.

Вот мой код для сползания клонированный контента (который работает, но не позволяет мне редактировать через Quill.

Перед вводом в Quill я имел текстовое поле, который работал хорошо, но я не ожидаю, пользователи, чтобы иметь возможность писать HTML так переехали в 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); 
}); 

клонированного Div является .стром-элемент ДИВ в этом блоке HTML

<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>  

Пожалуйста, сообщите.

Answer 1

Quill ожидает элемент DOM или строку идентификатора. Вы передаете объект jQuery. Попробуйте использовать вместо этого:

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

Пример:

//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>