ckeditor富文本应用（一）

之前在博客应用过这个插件，后来转成了marked.js。最近公司需要研究富文本编辑器。因此整理了一下。

ckeditor提供了五种类型的编辑器，可以根据自己的需求选择

以下是引入的几种引入方式

一、script标签引入

可以通过script标签引入，removePlugins删除多余组件。
文档demo

1
2
// 查看所有的组件
console.log(Array.from(editor.ui.componentFactory.names()))

二、使用angular、vue、react等框架

可以参照文档 angular

angular使用方案

博客之前的应用方案 html

1
2
3
4
5
6
7
<ckeditor
    [editor]="Editor"
    [data]="data"
    [disabled]="false"
    [config]="config"
    (ready)="onReady($event)"
    (blur)="onChange($event)"></ckeditor>

继承ControlValueAccessor类，可以直接配合form使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
@Component({
  selector: 'app-ckeditor',
  templateUrl: './ckeditor.component.html',
  styleUrls: ['./ckeditor.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,//值
      useExisting: forwardRef(() => CkeditorComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,//校验
      useExisting: forwardRef(() => CkeditorComponent),
      multi: true//令牌多对一
    }
  ]
})
export class CkeditorComponent implements ControlValueAccessor {

  public data: string = ''
  private propageteChange = (_: any) => { };

  //ckeditor配置
  public Editor = DecoupledEditor;
  public config = {
    language: 'zh-cn',
  };

  constructor() { }

  writeValue(obj: any): void {
    this.data = obj;
  }
  registerOnChange(fn: any): void {
    this.propageteChange = fn;
  }
  registerOnTouched(fn: any): void {

  }

  validate(c: FormControl): { [key: string]: any } {
    return this.data ? null : {
      editorInvalid: {
        valid: false
      }
    }
  }
  onReady(editor) {
    editor.ui.view.editable.element.parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.view.editable.element
    );
    editor.plugins.get('FileRepository').createUploadAdapter = function (loader) {
      return new FileUploadAdapter(loader);
    };
  }
  onChange({ editor }: ChangeEvent) {
    this.data = editor.getData();
    this.propageteChange(this.data)
  }

}



class FileUploadAdapter {

  constructor(private loader) {
  }

  upload() {
    return new Promise((resolve, reject) => {
      const data = new FormData();
      data.append('file', this.loader.file);

      var xhr = new XMLHttpRequest();
      // xhr.setRequestHeader("Content-type","multipart/form-data");
      xhr.open('post', '/api/uploadpic');
      xhr.send(data);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          let data = JSON.parse(xhr.responseText);
          if (data.fileName) {
            resolve({
              default: '/api' + data.fileName
            });
          } else {
            reject(data.msg);
          }
        }
      };
    });
  }
  abort() {
  }
}

封装成了组件，可以直接使用：

1
<app-ckeditor formControlName="content"></app-ckeditor>

三、npm打包

如果想定制化开发，减小体积，使ckeditor更加符合项目需求下一篇将详细介绍