jquery - 克隆到 dom 后如何初始化 Quill 编辑器

Question

我设置了一个相当复杂的页面，用户可以在其中动态地将 block 添加到 dom。该 block 中有一个鹅毛笔编辑器，并且可以正常工作。但是，我还需要能够在将内容复制到 dom 区域后对其进行编辑。

即单击“添加页面”可使用鹅毛笔编辑器向下滑动表单。保存此操作会将表单复制到页面的新部分并清除原始表单。现在，当单击编辑图标时，复制的表单会向下滑动，他们应该能够进行编辑。但是 Quill 编辑器不会加载。我可以使用 display:none 在 dom 中看到复制的元素 - 很容易取消隐藏，但是这样做我可以看到 div 和工具栏，但无法编辑。

所以我想我需要在克隆的 div 上重新初始化 Quill，但我被卡住了。

这是我用于向下滑动克隆内容的代码(可以工作，但不允许我通过 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 block 中的 .page-item div

<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 元素或 ID 字符串。 您正在传递一个 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>