如何在summernote div中计算图像?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在summernote div中计算图像?相关的知识,希望对你有一定的参考价值。
我有summernote div,我想在可编辑的summernote div上计算插入的图像。我正在使用onChange
回调和JQuery的find()
方法。但是当我的图像超过0时,console.log
会返回0。
这是我的剧本。
<div id="summernote"></div>
JS
$('#summernote').summernote({
placeholder: 'Hello bootstrap 4',
tabsize: 2,
height: 400,
callbacks: {
onChange: function(e) {
var imageCount = $("#summernote").find('img').length;
console.log("img count:" + imageCount);
}
}
});
当用户在<div id='summernote'>
中更改内容时,如何计算图像?
答案
summernote.change事件有一个参数:内容。此参数包含summernote中的html源代码。您可以使用get--set-code获得相同的html:
var markupStr = $('#summernote').summernote('code');
因此,您需要更改:
var imageCount = $("#summernote").find('img').length;
至:
var imageCount = $(contents).find('img').length;
片段:
$('#summernote').summernote({
placeholder: 'Hello bootstrap 4',
tabsize: 2,
height: 400,
callbacks: {
onChange: function(contents) {
var imageCount = $(contents).find('img').length;
console.log("img count:" + imageCount);
}
}
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.min.js"></script>
<div id="summernote"></div>
另一答案
我认为你的summernote版本不支持jquery自定义事件样式。所以你可以尝试这个:
$('#summernote').on('summernote.change', function(we, contents, $editable) {
var count = $(contents).find('img').length;
console.log('images number : ' + count);
});
参考:https://summernote.org/deep-dive/#oninit
以上是关于如何在summernote div中计算图像?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Laravel 7 中更新图像 Summernote?
如何将通过summernote生成的大型base64图像保存在我的数据库中?