0

我在我的 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>

编辑器.html 文件

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

编辑器.component.ts

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

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

4

2 回答 2

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'] }
  1. 使用[ngxSummernoteView]元素上的指令来设置元素的 innerHTML： 
<div [ngxSummernote]="config" style="display: none;"  name="HtmlEditorInput"  
     [(summernoteModel)]="*.*"></div>
于 2020-01-07T09:48:42.497 回答
0

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

ngAfterViewInit() {
  $('#summernote').summernote();
}
于 2019-03-25T12:59:16.450 回答