Skip to content

Instantly share code, notes, and snippets.

@thomd

thomd/summernote.html

Last active January 27, 2021 16:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save thomd/9539445 to your computer and use it in GitHub Desktop.
Save thomd/9539445 to your computer and use it in GitHub Desktop.
Download ZIP
summernote example
Raw
summernote.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="components/summernote/dist/summernote.css" />
</head>
<body>
<div class="summernote container">
<div id="summernote" class="span12">
<p>Adipisicing natus accusamus necessitatibus fuga accusamus aliquam sapiente numquam labore. Eaque impedit libero impedit quibusdam laboriosam. Hic explicabo minima sit eius vitae voluptates. Sit officia veniam accusamus suscipit pariatur alias.</p>
</div>
</div>
<div class="summernote container">
<button id="edit" class="btn btn-primary">Edit</button>
<button id="save" class="btn btn-primary">Save</button>
</div>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src="components/summernote/dist/summernote.js"></script>
<script src="components/summernote/lang/summernote-de-DE.js"></script>
<script>
$('#edit').on('click', function() {
$('#summernote').summernote({
height: '300px',
width: '600px',
focus: true,
lang: 'de-DE',
oninit: function() {
console.log('Summernote is launched');
},
onenter: function(e) {
console.log('Enter/Return key pressed');
},
onfocus: function(e) {
console.log('Editable area is focused');
},
onblur: function(e) {
console.log('Editable area loses focus');
},
onkeyup: function(e) {
console.log('Key is released:', e.keyCode);
},
onkeydown: function(e) {
console.log('Key is pressed:', e.keyCode);
},
//onImageUpload: function(files, editor, welEditable) {
// console.log('image upload:', files, editor, welEditable);
//},
toolbar: [
//['style', ['style']], // no style button
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['picture', ['picture']],
//['insert', ['picture', 'link']], // no insert buttons
//['table', ['table']], // no table button
//['help', ['help']] //no help button
]
});
});
$('#save').on('click', function() {
var aHTML = $('#summernote').code(); //save HTML If you need(aHTML: array).
console.log(aHTML);
$('#summernote').destroy();
});
</script>
</body>
</html>
@omerayan
Copy link

edssdfdfd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment