Menu
I would use summernote with AngularJS. I have found https://github.com/outsideris/angular-summernote, but this doesn't work for me. The only thing I get is an Error
Error: undefined is not a function (evaluating 'element.summernote(summernoteConfig)')
I have included all required files like jquery, bootstrap, summernote, etc.
My second idea was to use summer note without the angular-summernote directive. But also that shouldn't work perfectly.
If I try
$(document).ready(function() {
$('.summernote').summernote();
});
summernote doesn't work, but If I try sth. like
$.getScript('//cdnjs.cloudflare.com/ajax/libs/summernote/0.5.1/summernote.min.js',function(){
$('#summernote').summernote();
});
it works, but I would use my local copy of summernote so the second one isn't that what I need
Hope you understood my problem and thanks for any help Rico
981
There are 2 ways to use the Summernote Editor on our web page: Using the downloaded precompiled and minified versions of CSS and JavaScript files from their official site. Using the available CDN links for summernote CSS & js, jQuery, and Bootstrap.
angular-summernote is just a directive to bind summmernote's all features. You can use summernote with angular way. Since v0. 7. x, the version of angular-summernote follows the version of summernote.
Summernote is a JavaScript library that helps you create WYSIWYG editors online.
You can define a placeholder with the placeholder option. $('#summernote'). summernote({ placeholder: 'write here...' }); Summernote can also be set to inherit the placeholder from the placeholder attribute on the dom element.
Ok guys, I've found the problem, for everyone with the same problem it's a very stupid mistake ;)
The problem was the I include the main angular.min.js file before jQuery an Bootstrap. Now I include jQuery first, then Bootstrap and then AngularJS and it works perfect.
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="summernote.css" />
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="summernote.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-summernote.min.js"></script>
In this order it works perfect for me.
A short tip, if you have also a problem with the button size, only thing to do is include <!DOCTYPE html> in you're main html file.
Rico
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With