如何在angularjs中使用summernote

Question

我会在 AngularJS 中使用 summernote。我找到了https://github.com/outsideris/angular-summernote，但这对我不起作用。我唯一得到的是一个错误

错误：未定义不是函数（正在评估'element.summernote（summernoteConfig）'）

我已经包含了所有必需的文件，例如 jquery、bootstrap、summernote 等。

我的第二个想法是在没有 angular-summernote 指令的情况下使用 Summer Note。但这也不应该完美。

如果我尝试

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

summernote 不起作用，但如果我尝试某事。喜欢

$.getScript('//cdnjs.cloudflare.com/ajax/libs/summernote/0.5.1/summernote.min.js',function(){
  $('#summernote').summernote();
});

它有效，但我会使用我本地的 Summernote 副本，所以第二个不是我需要的

希望您能理解我的问题并感谢您的帮助 黎哥

Answer 1

好的，伙计们，我找到了问题所在，对于遇到同样问题的每个人来说，这是一个非常愚蠢的错误；）

问题是我在 jQuery 和 Bootstrap 之前包含了主要的 angular.min.js 文件。现在我先包含 jQuery，然后是 Bootstrap，然后是 AngularJS，它运行良好。

<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>

按照这个顺序，它非常适合我。

一个简短的提示，如果您对按钮大小也有疑问，唯一要做的就是在您的主 html 文件中包含 <!DOCTYPE html>。

里科

Answer 2

我们有类似的问题，我们看到的唯一解决方法是用它自己的模块（下面是summernoteDemo）包装它：

...
            <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>

但我们有问题让它出现在多个地方/实例中。也许您可以尝试告诉我们。