Question

我是Angular2的新手，并试图在其中使用第三方库。尝试使用summernote Js插件，用于富文本区域。 http://summernote.org/getting-started/

这是我的 my-summernote.component.ts 文件。

import { ViewChild, ElementRef, AfterViewInit, Component} from '@angular/core';
import '../../assets/plugins/summernote/summernote.min.js';

declare var jQuery: any;

@Component({
    selector: 'my-summernote',
    templateUrl: './my-summernote.template.html'
})
export class SummerNoteComponent implements AfterViewInit {
    constructor(){   
     }
    ngAfterViewInit() {        
        jQuery("#theTextArea").summernote();
    }
}

这是 my-summernote.template.html 文件

<textarea class="form-control" name="theTextArea" id="theTextArea">                              
    </textarea>

我已将jquery包含在 index.html 文件中，但我收到了以下错误

    Uncaught Error: Cannot find module "codemirror"
        at webpackMissingModule (main.bundle.js:2211)
        at b.function.Array.reduce.Array.reduce.e (main.bundle.js:2211)
        at Object.505 (main.bundle.js:2211)
    Module not found: Error: Cannot resolve module 'codemirror' in C:\Project\Community3.0\CommunityAng\src\assets\plugins\summernote
resolve module codemirror in C:\Project\Community3.0\CommunityAng\src\assets\plugins\summernote
  looking for modules in C:\Project\Community3.0\CommunityAng\src
    C:\Project\Community3.0\CommunityAng\src\codemirror doesn't exist (module as directory)
    resolve 'file' codemirror in C:\Project\Community3.0\CommunityAng\src
      resolve file

有人可以指导我错过的内容。

Answer 1

通过npm安装bootstrap，summernote，ng2-summernote。

in .angular-cli.json

{

{"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/summernote/dist/summernote.css"
],

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/summernote/dist/summernote.min.js",
"../node_modules/summernote/dist/lang/summernote-es-ES.min.js"
]}

}

在app.module.ts的声明中添加Ng2Summernote

从'ng2-summernote / ng2-summernote'导入{Ng2Summernote};
html和js

<div class="row"> <div class="col-md-12"> <ng2-summernote [(ngModel)]="text"></ng2-summernote> </div> </div> <button class="btn btn-primary" (click)="submit()"> Submit</button> <div> {{model.text}} </div>

import { Component, OnInit } from '@angular/core'; import { Ng2Summernote } from 'ng2-summernote/ng2-summernote'; @Component({ selector: 'app-summernote-richtext', templateUrl: './summernote-richtext.component.html', styleUrls: ['./summernote-richtext.component.css'] }) export class SummernoteRichtextComponent implements OnInit {
constructor() { }
ngOnInit() { } uploadData:string; text: string = 'appendix'; data: string = 'appendix'; model:any = {}; imgSrc = '/assets/img.jpg' options: any = { height: 100, toolbar: [['style', ['bold', 'italic', 'underline', 'clear']], ['para', ['ul', 'ol', 'paragraph']] ] }; disabled: boolean = false; submit(){ this.model.text = this.text; } }

Angular2 - 添加第三方Javascript库（Summernote）

1 个答案: