Recently, the project requirements built with AngularJS2(ng alain) need rich text. Many of them are found online, either too heavy or without detailed integration steps.

Below is a detailed list of how I can integrate wangedit into my project (project name myPro).

Specific operation steps

Operation steps reference:

https://github.com/fengnovo/wangEditor/tree/master/example/demo/in-ng2

Editor operation reference document:

https://www.kancloud.cn/wangfupeng/wangeditor2/113969

But it still didn't get up. The console reported an error and the element couldn't be found. I can only modify it myself.

(1) install wangedit

After the project runs, install wangedit. I need to add a version to install. I currently use 2.1.23. I don't know why. Installing other versions will still report an error. I haven't found the reason at present.

// Installation command

npm install wangeditor@2.1.23 --save

(2) modify the tsconfig.json file

myPro/tsconfig.json file, which is the final code.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    // wangeditor
    "allowJs": true,
    "mapRoot": "./"
  }
}

(3) add editor template

Add editor template under myPro/src/app to test this function. This is a habit of mine. First, make a separate file to test the function, and then apply it in the project.

cd to myPro/src/app

// Command build template

ng generate component editor

(4)myPro/src/app/editor/editor.component.html

<nz-layout style="padding:24px 0;">
  <div style="background-color: white; padding: 24px;">
    <div id="editorElem" style="height: 400px;">
      <p>Please enter content...</p>
    </div>

    <button (click)="getVal()" style="margin-top: 10px;">Get content</button>

  </div>
</nz-layout>

(5)myPro/src/app/editor/editor.component.ts

import {Component, OnInit, ElementRef, Renderer, Output, EventEmitter } from '@angular/core';
import * as wangEditor from '../../../node_modules/wangeditor/dist/js/wangEditor.js';


@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {

  private editor: any
  @Output() onPostData = new EventEmitter()

  constructor(private el: ElementRef, private renderer: Renderer) { }

  ngOnInit() {
    const editordom = this.el.nativeElement.querySelector('#editorElem')
    this.editor = new wangEditor(editordom)
    // Upload pictures
    this.editor.config.uploadImgUrl = '/upload';
    this.editor.create();
  }

  getVal(): any {
    console.log(this.editor)
    console.log(this.editor.$txt)
    const data = this.editor.$txt.text();
    const data1 = this.editor.$txt.html();
    console.log(data);
    console.log(data1);
  }

}

(6)myPro/src/style.css or myPro/src/style.less

/* You can add global styles to this file, and also import other style files */
@import "~wangeditor/dist/css/wangEditor.min.css";

PS: the above codes are the final codes. Follow these steps to integrate wangedit into the AngularJS2 project, which is easy to use at present.