问题
I am trying to setup CKEditor in my Angular application by following the steps in https://github.com/chymz/ng2-ckeditor#angular---ckeditor-component
Getting error 'Cannot find module '@angular/core' in the following files: ckbutton.directive.d.ts, ckeditor.component.d.ts, ckgroup.directive.d.ts
Dependencies
"dependencies": {
"@angular/common": "~5.2.4",
"@angular/compiler": "~5.2.4",
"@angular/core": "~5.2.4",
"@angular/forms": "~5.2.4",
"@angular/http": "~5.2.4",
"@angular/platform-browser": "~5.2.4",
"@angular/platform-browser-dynamic": "~5.2.4",
"@angular/router": "~5.2.4",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.4.2",
"zone.js": "^0.8.4" },
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler':
'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-
browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-
dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-
api/bundles/in-memory-web-api.umd.js',
//Third party libraries
'ng2-ckeditor': 'npm:ng2-ckeditor',
},
// packages tells the System loader how to load when no filename and/or
no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
},
'ng2-ckeditor': {
main: 'lib/index.js',
defaultExtension: 'js',
},
}
});
})(this);
app.module.ts
import { CKEditorModule } from 'ng2-ckeditor';
@NgModule({
imports: [BrowserModule, FormsModule, CKEditorModule,
RouterModule, RouterModule.forRoot(appRoutes, { useHash: true })
],
回答1:
Without using CDN's in the project and including CKEditor plugins to the project. Here is how I tackled the problem:
Install ng2-ckeditor with ckeditor using npm.
npm install --save ckeditor
and
npm install --save ng2-ckeditor
Update the angular-cli.json to be able to add plugins to the instance of CKEditor. In the assets section of angular-cli.json add:
"assets": [
"assets",
"favicon.ico",
{
"glob": "**/*",
"input": "../node_modules/ckeditor/",
"output": "assets/js/ckeditor/",
"allowOutsideOutDir": true
}
]
add also ckeditor.js from the downloaded npm to the script-tag in angular-cli.json:
"scripts": [
"../node_modules/ckeditor/ckeditor.js"
]
Download the plugins that you need to use to the folder /assets/js/ckeditor/plugins/ of your project. Be sure that the plugin.js file exists in each subfolder of your plugins folder.
Create your own config file assets/js/ckeditor/ckeditor-config.js for ckeditor with the following content:
(function(){
CKEDITOR.basePath = '/assets/js/ckeditor/'
CKEDITOR.plugins.addExternal('wordcount', 'plugins/wordcount/');
CKEDITOR.plugins.addExternal('notification', 'plugins/notification/');
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'wordcount,notification';
}
})();
Create an internal service to be able to configure your ckeditor with your own input. Here I'm using the service to adjust the height and set the maximum limit of my characters from my ckeditor component. I'm also telling the plugin I am using to display only the character counter.
import { Injectable } from '@angular/core';
@Injectable()
export class CkeditorConfigService {
constructor() { }
public getConfig(height: number, maxCharCount: number){
return {
customConfig: '/assets/js/ckeditor/ckeditor-config.js',
height: height,
wordcount: {
showParagraphs: false,
showWordCount: false,
showCharCount: true,
maxCharCount: maxCharCount
}
};
}
}
As ckeditor is a form section, you need to add FormsModule to your app.module.ts, as well as the ng2-ckeditor module.
imports: [
...
FormsModule,
CKEditorModule,
...
]
From your component add the internal service.
@Component({
selector: 'test-ckeditor-app',
templateUrl: './editor.component.html',
providers: [
CkeditorConfigService
]
})
export class EditorComponent implements OnInit {
ckeditorContent: string = '<p>Some html</p>';
private myCkeditorConfig: any;
constructor(private ckService: CkeditorConfigService) {}
ngOnInit() {
this.myCkeditorConfig = this.ckService.getConfig(150, 400);
}
}
And finally in your html file add the following:
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="myCkeditorConfig">
</ckeditor>
Please find the project sample on github:
https://github.com/dirbacke/ckeditor4
Note! When you compile and run, you will get the MIME-type console warning. That is because the css files specified in the warning have comments.
回答2:
The official CKEditor 4 Angular integration for Angular 5+ has recently been published. It may help solve your issue.
The basic usage is pretty straightforward: in order to create an editor instance in Angular, install the ckeditor4-angular npm package as a dependency of your project:
npm install --save ckeditor4-angular
After installing, import CKEditorModule to your application:
import { CKEditorModule } from 'ckeditor4-angular';
@NgModule( {
imports: [
...
CKEditorModule,
...
],
…
} )
And then you can use the <ckeditor> tag in the component template to include the rich text editor:
<ckeditor data="<p>Hello, world!</p>"></ckeditor>
The data attribute used in the example above is responsible for setting the editor’s data.
For more advanced configuration you may refer to the official CKEditor 4 Angular integration guide.
来源：https://stackoverflow.com/questions/48751957/how-to-implement-ckeditor-in-angular-app