Geek Answers Handbook

How to use summernote with corner

I would use summernote with AngularJS. I found https://github.com/outsideris/angular-summernote , but this does not work for me. The only thing I get is Error

Error: undefined is not a function (evaluation of "element.summernote (summernoteConfig)")

I included all the necessary files like jquery, bootstrap, summernote, etc.

My second idea was to use a summer note without the angular -summernote directive. But this should not work perfectly.

If i try

$(document).ready(function() { $('.summernote').summernote(); });

summernote does not work, but if I try sth. as

 $.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 is not what I need

I hope you understand my problem and thanks for any help Rico

+7
angularjs summernote
source share
2 answers

Ok guys, I found a problem, for everyone with the same problem it was a very stupid mistake;)

The problem was that I included the main angular.min.js file before jQuery Bootstrap. Now I turn on jQuery first, then Bootstrap, and then AngularJS, and it works fine.

 <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 great for me.

A quick tip, if you also have a problem with the button size, you just need to include <!DOCTYPE html> in the main html file.

Rico

+10
source share

We have a similar problem, the only workaround that we see if we wrap it with our own module (hereinafter referred to as summernoteDemo), for example:

 ... <div class="span1"> <div ng-app="summernoteDemo"> <summernote id="editor" code="text" ng-model="item.description"></summernote> <br> <textarea type="text" ng-model="item.description" style="width:100%;"></textarea></br> </div>

But we have a problem for it to appear in multiple places / instances. Maybe you can try and let us know.

0
source share

More articles:


All Articles