带有QL文本编辑器的jQuery事件委托

时间:2019-01-27 21:00:41

标签: javascript jquery html

我有一个使用jquery的onclick事件,我在其中用已单击以进行编辑的特定公告的文本/ html填充模式。我能够利用事件委派的知识,使用DOM中的相应文本填充模态表单中除一个字段以外的所有字段,但不能确定获取html的路径值并填充模态的文本编辑器(我正在使用quillJS)。这是我的onclick事件代码,可以在其中获取标题,号召性用语按钮,号召性用语链接和顺序:

$('.card-test').on('click', '.edit-btn', function () {
    id = $(this).data('property');
    $('#titleEdit').val($(this).parent().find('.card-title').text());
    $('#ctaTitleEdit').val($(this).parent().find('#ctaText').text());
    $('#ctaLinkEdit').val($(this).parent().find('#ctaURL').attr('href'));
    $(`#orderNumberEdit`).val($(this).parent().find('#orderNumberSpan').text())
})

以下是公告的HTML,其中包含填充模式的信息:

<div class="card-test row">
    <div class="container py-3">
    <div class="card">
        <div class="row ">
            <div class="col-lg-4">
                <img src="" class="w-100">
            </div>
            <div class="col-lg-8 px-3">
                <div class="card-block px-3">
                    <h5 class="card-title mc-title pt-3">Test Announcement</h5>
                    <div class="card-text" id="descriptionBodyHTML"><p>body... click <a href="https://google.com" target="_blank">here</a>.</p></div>
                    <a id="ctaURL" href="https://google.com"><div id="ctaText" class="btn btn-success mb-2" data-property="5c4e13f8aeb84c29ec17fc9a">Click Here</div></a>
                    <br><br>
                    <p class="card-text">Order:</p>
                    <p class="card-text" id="orderNumberSpan">10</p>
                    <div data-toggle="modal" class="btn btn-primary edit-btn mb-2" data-property="5c4e13f8aeb84c29ec17fc9a" data-target="#editModal"><i class="fa fa-pencil pr-2" aria-hidden="true"></i>Edit</div>
                 <div class="btn btn-danger mb-2 delete-btn" data-dbid="5c4e13f8aeb84c29ec17fc9a"><i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete</div>
                </div>
            </div>
        </div>
    </div>
</div></div>

这是模式打开时的html:

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title mc-title" id="exampleModalLabel">Edit Announcement</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="modal-body">
        <form action="/api/announcements" method="post">
            <label>Title</label>
            <input type="text" placeholder="Title" class="form-control mb-2 mc-title" id="titleEdit" name="title">
            <label>Description</label>
            <div class="ql-toolbar ql-snow"><span class="ql-formats"><span class="ql-header ql-picker"><span class="ql-picker-label" tabindex="0" role="button" aria-expanded="false" aria-controls="ql-picker-options-1"><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" aria-hidden="true" tabindex="-1" id="ql-picker-options-1"><span tabindex="0" role="button" class="ql-picker-item" data-value="1"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="2"></span><span tabindex="0" role="button" class="ql-picker-item" data-value="3"></span><span tabindex="0" role="button" class="ql-picker-item ql-selected"></span></span></span><select class="ql-header" style="display: none;"><option value="1"></option><option value="2"></option><option value="3"></option><option selected="selected"></option></select></span><span class="ql-formats"><button type="button" class="ql-bold"><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></button><button type="button" class="ql-italic"><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 type="button" class="ql-underline"><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 type="button" class="ql-link"><svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="11" y1="7" y2="11"></line> <path class="ql-even ql-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path> <path class="ql-even ql-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path> </svg></button></span><span class="ql-formats"><button type="button" class="ql-list" value="ordered"><svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="7" x2="15" y1="14" y2="14"></line> <line class="ql-stroke ql-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line> <path class="ql-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path> <path class="ql-stroke ql-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path> <path class="ql-stroke ql-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path> </svg></button><button type="button" class="ql-list" value="bullet"><svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line> <line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line> <line class="ql-stroke" x1="6" x2="15" y1="14" y2="14"></line> <line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line> <line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line> <line class="ql-stroke" x1="3" x2="3" y1="14" y2="14"></line> </svg></button></span><span class="ql-formats"><button type="button" class="ql-clean"><svg class="" viewBox="0 0 18 18"> <line class="ql-stroke" x1="5" x2="13" y1="3" y2="3"></line> <line class="ql-stroke" x1="6" x2="9.35" y1="12" y2="3"></line> <line class="ql-stroke" x1="11" x2="15" y1="11" y2="15"></line> <line class="ql-stroke" x1="15" x2="11" y1="11" y2="15"></line> <rect class="ql-fill" height="1" rx="0.5" ry="0.5" width="7" x="2" y="14"></rect> </svg></button></span></div><div placeholder="Description" class="form-control mb-2 ql-container ql-snow" name="description" id="descriptionEdit"><div class="ql-editor ql-blank" data-gramm="false" contenteditable="true"><p><br></p></div><div class="ql-clipboard" contenteditable="true" tabindex="-1"></div><div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a></div></div>
            <label>Call to Action Button</label>
            <input type="text" placeholder="Call to Action" class="form-control mb-2 mc-title" id="ctaTitleEdit" name="ctaTitle">
            <label>Call to Action Link</label>
            <input type="text" placeholder="Call to Action Link" class="form-control mb-2 mc-title" id="ctaLinkEdit" name="ctaLink">
            <label>Order</label>
            <input type="number" class="form-control mb-2" placeholder="Number" id="orderNumberEdit" name="order">
            <button class="btn btn-mc mt-2 form-control update-put-btn">Update</button>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
    </div>
</div>Ï

我的目标是在<p>内填充<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true"><p><br></p></div>标签。 jQuery选择器是什么?感谢您的帮助。

0 个答案:

没有答案