如何在 Angular ng2admin 主题中添加 Summernote 插件

Question

我在我的 angular 2 项目中添加了 summernote 插件，并且我使用的是 ng2admin 主题，而不是使用 angular CLI。那么如何在我的项目中添加 Summernote 编辑器呢？

我尝试在 index.html 文件中包含 summernote css 和 js 文件。

index.html 文件

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>

editor.html 文件

<div id="summernote">Hello Summernote</div

editor.component.ts

ngOnInit(){
  $('#summernote').summernote();
}

错误：“$(...).summernote 不是函数”。

Answer 1

在 Angular 中添加 SummerNote 非常容易。请按照以下几个步骤操作：

1. 在 Angular CLI 中运行以下命令或将其与 npm 一起使用

yarn add  ngx-summernote summernote

1. 在 angular.json 文件中添加添加 JQuery 和 Summernote 脚本和样式：

"styles": [  ... "node_modules/summernote/dist/summernote-lite.css" ],
"scripts": [ ... "node_modules/jquery/dist/jquery.min.js", 
                 "node_modules/summernote/dist/summernote-lite.js" ]

1. Summernote 使用以下默认配置进行初始化，您可以将其添加到 TS 文件中

config ={ placeholder: '', tabsize: 2, height: 100, uploadImagePath: '', toolbar: 
  [ // [groupName, [list of button]] ['misc', ['codeview', 'undo', 'redo']], 
  ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['bold', 
  'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']], 
  ['fontsize', ['fontname', 'fontsize', 'color']], ['para', ['style', 'ul', 'ol', 
  'paragraph', 'height']], ['insert', ['table', 'picture', 'link', 'video', 
  'hr']] ], fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 
  'Courier New', 'Roboto', 'Times'] }

4. 在元素上使用[ngxSummernoteView] 指令来设置元素的innerHTML：

<div [ngxSummernote]="config" style="display: none;"  name="HtmlEditorInput"  
     [(summernoteModel)]="*.*"></div>

Answer 2

您应该使用ngAfterViewInit 挂钩。在ngOnInit 内部，组件的 HTML 元素还不存在：

ngAfterViewInit() {
  $('#summernote').summernote();
}