文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在角度应用程序中实现CKEditor？

问如何在角度应用程序中实现CKEditor？
EN

Stack Overflow用户

提问于 2018-02-12 17:15:15

回答 2查看 6.9K关注 0票数 4

我试图在我的角应用程序中设置CKEditor，方法是遵循https://github.com/chymz/ng2-ckeditor#angular---ckeditor-component中的步骤

在以下文件中，“获取错误”无法找到模块“@角/核心”：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 })
],

angular

ckeditor4.x

回答 2

Stack Overflow用户

发布于 2018-05-07 16:24:11

而不需要在项目中使用CDN，并将CKEditor插件包含到项目中。下面是我如何处理这个问题的方法：

使用npm安装ng2-ckeditor和ckeditor。

npm install --save ckeditor

和

npm install --save ng2-ckeditor

更新ange-cli.json以便能够将插件添加到CKEditor实例中。在角-cli.json的资产部分中添加：

"assets": [
    "assets",
    "favicon.ico",
    {
       "glob": "**/*", 
       "input": "../node_modules/ckeditor/", 
       "output": "assets/js/ckeditor/", 
       "allowOutsideOutDir": true
    }
 ]

还将下载的npm中的ckeditor.js添加到角-cli.json中的脚本标记中：

"scripts": [
   "../node_modules/ckeditor/ckeditor.js"
]

将需要使用的插件下载到项目的文件夹/assets/js/ckeditor/ plugins /。确保plugin.js文件存在于插件文件夹的每个子文件夹中。

为ckeditor创建您自己的配置文件资产/js/ckeditor/ckeditor-config.js，内容如下：

(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组件中设置我的字符的最大限制。我也告诉插件，我正在使用，只显示字符计数器。

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添加到您的app.module.ts以及ng2-ckeditor模块中。

imports: [
   ...
   FormsModule,
   CKEditorModule,
   ...
]

从组件中添加内部服务。

@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文件中添加以下内容：

<ckeditor
   [(ngModel)]="ckeditorContent"
   [config]="myCkeditorConfig">
</ckeditor>

请在github上找到项目样本：

https://github.com/dirbacke/ckeditor4

注意！编译和运行时，您将得到MIME类型的控制台警告。这是因为警告中指定的css文件有注释。

票数 4

Stack Overflow用户

发布于 2019-03-25 13:16:13

官方的角CKEditor 4角积分 (角5+ )最近已经出版。这可能有助于解决你的问题。

基本用法非常简单:为了在create中创建编辑器实例，请将ckeditor4-angular npm包安装为项目的依赖项：

npm install --save ckeditor4-angular

安装后，将CKEditorModule导入应用程序：

import { CKEditorModule } from 'ckeditor4-angular';

@NgModule( {
    imports: [
        ...
        CKEditorModule,
        ...
    ],
    …
} )

然后可以使用组件模板中的<ckeditor>标记来包含富文本编辑器：

<ckeditor data="<p>Hello, world!</p>"></ckeditor>

上面示例中使用的数据属性负责设置编辑器的数据。

对于更高级的配置，您可以参考 官方CKEditor 4角积分指南。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48751957

复制

相似问题

问如何在角度应用程序中实现CKEditor？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在角度应用程序中实现CKEditor？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在角度应用程序中实现CKEditor？
EN