How to use summernote with angularjs

Asked 31/10, 2014 at 18:59 Answered 1/11, 2014 at 18:55

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

Perpetrate answered 31/10, 2014 at 18:59 Comment(0)

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

Perpetrate answered 1/11, 2014 at 18:55 Comment(0)

We have similar issue, the only workaround we see if to wrap it with it's own module (in the following it's summernoteDemo) like:

...
            <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 issue to make it appear in more than one place/instance. Maybe you can try and let us know.

Helmuth answered 1/11, 2014 at 5:13 Comment(1)

Doesn't work for me :(, same error as before. Is it possible that summernote work only with a specific version of bootstrap, jquery etc.? – Perpetrate 1/11, 2014 at 13:2

Recommended topics

Hot tags