Bug with bootstrap 4.0.0 and summernote version is 0.8.10
See original GitHub issuesteps to reproduce.
This happens in almost every browser. For example, Mac OS with chrome(Version 68.0.3440.106 (Official Build) (64-bit))
The buttons layout is crashing and a few unknown icons are showing at the top left of the browser. See the attached image.
The code is below.
`private initCheckingArea() { const addComment = function (context) { const ui = jQuery.summernote.ui;
// create button
const button = ui.button({
contents: '<i class="fa fa-child"/> Add Comment',
tooltip: 'Add Comment',
container: false,
click: function () {
const tooltip = jQuery('#commentData').val();
let range;
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
const selectedText = range.toString();
const html = '<b title="' + tooltip + '">' + selectedText + '</b>'
range.deleteContents();
const div = document.createElement('b');
div.innerHTML = html;
const frag = document.createDocumentFragment();
let child;
while ( (child = div.firstChild) ) {
frag.appendChild(child);
}
range.insertNode(frag);
}
jQuery('#commentData').val('');
}
});
return button.render(); // return button as jquery object
};
jQuery('#verifiedWork').summernote({
dialogsInBody: true,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['color', ['color']],
['misc', ['undo', 'redo', 'fullscreen']],
['mybutton', ['addComment']]
],
buttons: {
addComment: addComment
}
});
jQuery('#verifiedWork').summernote('pasteHTML', this.work.content);
}`
Issue Analytics
- State:
- Created 5 years ago
- Comments:5
Top Results From Across the Web
Getting started - Summernote
The fastest way to get Summernote is to download the precompiled and minified versions of our CSS and JavaScript. No documentation or original...
Read more >summernote | Yarn - Package Manager
Super simple WYSIWYG Editor. Build Status npm version Coverage Status. Summernote. Summernote is a JavaScript library that helps you create WYSIWYG editors ...
Read more >Summernote non-bootstrap version problems with scroll
Try opening this example in full window and resize editor more than full window height. Try scrolling down and you will get some...
Read more >WYSIWYG text editor - Bootstrap 4 Advanced Components
<li>Add Summernote CSS to the header before bootstrap.min.css : <code><link rel="stylesheet" ...
Read more >Summernote Text Editor - RealPage
Summernote Version 0.8.10 ... Summernote relies on Bootstrap 4 and jQuery. ... href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Add this CSS code to your html file. It is better on bootstrap v4.1.2
Thank you @trantrong90. It’s working now.