添加动态HTML5编辑器

时间:2016-06-22 15:18:28

标签: jquery html5

我正在开发一个网站,其中我必须动态添加html 5 WYSIWYG意味着客户端可以添加越来越多的编辑器字段,因为他希望所有的东西都在工作html5编辑器正在添加尽可能多的时间但问题是当页面加载时,默认情况下有一个html5编辑器字段是好的但是当我添加更多的html5编辑器字段时,编辑器变为禁用,我无法在其上写任何东西。这是HTML的代码:

 <div class="multi-field-wrapper">
                <div class="multi-fields">
                    <div class="multi-field">
                        <input type="text" name="title[]" required class="form-control" placeholder="Title of description">
                        <textarea id="compose-textarea" name="more_reason[]" style="height: 150px" placeholder="Description" required class="form-control"></textarea>
                        <button type="button" class="btn btn-warning pull-right remove-field" style="margin-top: 10px; margin-bottom: 10px;">Remove</button>
                    </div>
                </div>
                <button type="button" class="btn btn-primary pull-right add-field" style="margin-right: 10px; margin-top: 10px;">Add field</button>
            </div>

这里是添加更多html 5编辑器的js代码

function add_field() {

    jQuery('.multi-field-wrapper').each(function () {
        var $wrapper = jQuery('.multi-fields', this);
        jQuery(".add-field", $(this)).click(function (e) {
            jQuery('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
        });
        jQuery('.multi-field .remove-field', $wrapper).click(function () {
            if (jQuery('.multi-field', $wrapper).length > 1)
                jQuery(this).parent('.multi-field').remove();
        });
    });

}

更多地了解如何获得最佳创意是屏幕截图

Screenshot

第一个在下面禁用的所有其他工作正常

0 个答案:

没有答案