Как добавить плагин summernote в угловую тему ng2admin

Question

Я добавил плагин summernote в свой проект angular 2, и я использую тему ng2admin, а не угловой CLI. Итак, как мне добавить редактор Summernote на мой проект?

Я попытался включить файл summernote css и js в файл index.html.

файл 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

Добавить SummerNote в Angular очень просто. Выполните несколько шагов ниже:

1. запустите следующую команду в Angullar CLI или используйте ее с npm

yarn add  ngx-summernote summernote

2. Добавьте скрипты и стили JQuery и Summernote в файл angular.json:

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

3. 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();
}