I tried summernote as a simple html editor. I tried including summernote from cdn as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="summernote" id="summernote"></div>
<input type="button" id="dwn-btn" value="Download"/>
<script>
$(document).ready(function () {
$('#summernote').summernote({
height: 500, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true // set focus to editable area after initializing summernote
});
function getCode() {
var html = $('#summernote').summernote("code");
console.log(html);
}
document.getElementById("dwn-btn").addEventListener("click", getCode);
});
</script>
</body>
</html>
Initialising summernote is working fine. But when click on download button, inside getCode function error throws as
Uncaught TypeError: $(...).summernote is not a function
While running this as code snippet its working fine. The problem is just create an html file with above code and run in browser, then the error will get in console. Please help me, I am stuck for 2 days. For any help thanks in advance.