我正在使用 quill 编辑器和 bootstrap 模态内部,它在以 JSON 形式将数据插入 data-* 属性时工作正常
所以有什么问题 :
问题是当我尝试使用 setContent api 在 quill 编辑器中设置数据时,它不起作用
/*
====================
Quill Editor
====================
*/
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
这是我的jsfiddle(在使用之前阅读下面的说明)
如何使用我的小提琴:
诀窍是将 JSON 字符串转换回 JSON 对象:
从此:var dataText = $(this).attr('data-text');
对此:var dataText = JSON.parse($(this).attr('data-text'));
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
function modalclick() {
$(".dynamic-element").on('click', function(event) {
var dataText = JSON.parse($(this).attr('data-text'));
$('#exampleModalLong').modal('show');
quill.setContents(dataText);
console.log(dataText);
})
}
$("#addElement").on('click', function(event) {
var delta = quill.getContents();
var $_textDelta = JSON.stringify(delta);
console.log($_textDelta);
$html = "<div class='dynamic-element' data-text='" + $_textDelta + "'>" +
"<div>dynamic-element</div>" +
"</div>";
$(".element").prepend($html);
modalclick();
$('#exampleModalLong').modal('hide');
})
//modalclick();
$("#openmodal").on('click', function(event) {
$('#exampleModalLong').modal('show');
})
$('#exampleModalLong').on('hidden.bs.modal', function(e) {
quill.deleteText(0, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<input type="button" id="openmodal" class="btn btn-info btn-rounded mb-4" value="Add element">
<div class="element">
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="editor-container">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="addElement" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句