如何在Angular应用中实现CKEditor? [英] How to implement CKEditor in Angular app?
问题描述
我正在按照 https://github.com/chymz/ng2-ckeditor#angular---ckeditor-component
在以下文件中获取错误无法找到模块'@ angular/core": ckbutton.directive.d.ts，ckeditor.component.d.ts，ckgroup.directive.d.ts
Getting error 'Cannot find module '@angular/core' in the following files: ckbutton.directive.d.ts, ckeditor.component.d.ts, ckgroup.directive.d.ts
依赖项
"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 })
],
推荐答案
在项目中未使用CDN，并且未将CKEditor插件包括到项目中.这是我解决问题的方法:
Without using CDN's in the project and including CKEditor plugins to the project. Here is how I tackled the problem:
使用npm将ng2-ckeditor与ckeditor一起安装.
Install ng2-ckeditor with ckeditor using npm.
npm install --save ckeditor
和
npm install --save ng2-ckeditor
更新angular-cli.json以便能够将插件添加到CKEditor实例.在angular-cli.json的资产部分中添加:
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
}
]
还将下载的npm中的ckeditor.js也添加到angular-cli.json中的脚本标签中:
add also ckeditor.js from the downloaded npm to the script-tag in angular-cli.json:
"scripts": [
"../node_modules/ckeditor/ckeditor.js"
]
将需要使用的插件下载到项目的文件夹/assets/js/ckeditor/plugins/中.确保plugins.js文件存在于plugins文件夹的每个子文件夹中.
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.
使用以下内容为ckeditor创建自己的配置文件asset/js/ckeditor/ckeditor-config.js:
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';
}
})();
创建一个内部服务，以便能够使用您自己的输入来配置您的ckeditor.在这里，我使用服务来调整高度，并从ckeditor组件中设置字符的最大限制.我还告诉插件我仅用于显示字符计数器.
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
}
};
}
}
由于ckeditor是一个表单部分，因此您需要将 FormsModule 和 ng2-ckeditor 添加到您的 app.module.ts 中. >模块.
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);
}
}
最后在您的html文件中添加以下内容:
And finally in your html file add the following:
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="myCkeditorConfig">
</ckeditor>
请在github上找到项目示例:
Please find the project sample on github:
https://github.com/dirbacke/ckeditor4
注意！编译并运行时，您将收到MIME类型的控制台警告.这是因为警告中指定的css文件具有注释.
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.
这篇关于如何在Angular应用中实现CKEditor?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
