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

我是Angular2的新手，嘗試在其中使用第三方庫。嘗試使用summernote Js插件，用於富文本區域。 http://summernote.org/getting-started/Angular2 - 添加第三方Javascript庫（Summernote）

這是我的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(); 
    } 
}

這裏是我的，summernote.template.html文件

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

我已經包括在的index.html文件 jQuery的，但我發現了以下錯誤

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

有人可以請指導我失蹤。

來源

2016-12-30 Fakhar uz zaman

你在哪裏，包括'codemirror'文件？ – martin

我沒有收錄它。可能是它可以從這個插件。但是我在官方文檔站點找不到它。 http://summernote.org/getting-started/#run-summernote –

通過npm安裝bootstrap，summernote，ng2-summernote。

{

{"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來自'ng2-summernote/ng2-summernote'的Summernote};
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; } }

來源

2017-07-14 04:14:02

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

回答

相關問題