2019-09-26/CKEditor5和Angular的结合

今天呢，我们来讨论一下ckeditor5和angular8的结合，前端我也是渣渣，依葫芦画瓢。当初为什么喜欢Angular呢，一方面是使用过angularJs，尽管angular2和angularJs一点也不像，但是情怀啊，忍不住想要探索。另一个就是Angular的风格很像java,跟那个spring的套路有相似的地方。废话也是够多了，现在我们切入主题。
首先就是搭建环境了，nodejs下载安装一下，什么环境变量，好好配置一下，要不然总会出现ng不是内部或者外部命令。path的环境变量大体有这么几个：

d:\Program Files\nodejs  nodejs的安装目录
C:\Program Files\nodejs\node_global  node的目录之子目录
C:\Program Files\nodejs\node_modules  node的目录之子目录

然后安装Angular cli:

npm install -g @angular/cli

等待一下时间，angular cli安装完成，cmd中键入ng --version

ccc.PNG

说明Angular cli安装好了。
接下来创建项目，cmd进入某一目录，执行 ng new 项目名。然后就会在这个目录创建项目，遇到不懂得就点击yes。过一会，项目就创建好了。
然后我们安装其余的依赖
cmd进入项目：
依次执行：

npm install --save @ckeditor/ckeditor5-angular
npm install --save @ckeditor/ckeditor5-build-classic

依赖至此安装完毕，现在我们来写代码吧。
使用idea导入项目，找到app.module.ts,引入CKEditorModule ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我们在AppComponent做演示：

import {Component, OnInit} from '@angular/core';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  /**
   * 全局Editor
   */
  public Editor = ClassicEditor;
  /**
   * 配置 20190926 暂时alignment没有效果  ckfinder有问题  ckfinder: {uploadUrl: 'xxx'}这个还没有试验
   */
  public config = {
    alignment: {
      options: [ 'left', 'center', 'right' ]
    },
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'alignment',
      'bulletedList', 'numberedList', 'blockQuote', 'undo',
      'ckfinder', 'imageTextAlternative', 'imageUpload', 'imageStyle:full', 'imageStyle:side'
    ],
    language: 'zh-cn',
    fontFamily: {
      options: [
        'default',
        'Arial, Helvetica, sans-serif',
        'Courier New, Courier, monospace',
        'Georgia, serif',
        'Lucida Sans Unicode, Lucida Grande, sans-serif',
        'Tahoma, Geneva, sans-serif',
        'Times New Roman, Times, serif',
        'Trebuchet MS, Helvetica, sans-serif',
        'Verdana, Geneva, sans-serif',
      ]},
    heading: {
      options: [
        { model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
        { model: 'heading1', view: 'h1', title: '标题1', class: 'ck-heading_heading1' },
        { model: 'heading2', view: 'h2', title: '标题2', class: 'ck-heading_heading2' },
        { model: 'heading3', view: 'h3', title: '标题3', class: 'ck-heading_heading3' },
        { model: 'heading4', view: 'h4', title: '标题4', class: 'ck-heading_heading4' },
      ]
    },
    ckfinder: {
      uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
    }
  };
  /**
   * 内容
   */
  public model = {
    editorData: '<p>Hello, world!哈哈</p>'
  };
  ngOnInit(): void {
  }
  public saveData(): void {
    console.log(this.model.editorData);
  }
}

对应的html:

<ckeditor
  [editor]="Editor"
  [(ngModel)]="model.editorData"
  [config]="config"
></ckeditor>
<button type="button" (click)="saveData()">保存</button>

页面效果：

1111111.PNG

完毕。