AngularJS集成wangeditor富文本编辑器

最近用AngularJS2(ng alain)搭建的项目需求中需要富文本，在网上找了很多，要么太重，要么没有详细的集成步骤。

下面将我自己如何将wangeditor集成在项目(项目名称myPro)中的，详细列出。

具体操作步骤

操作步骤参考：

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

编辑器操作参考文档：

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

但是还是没起来，控制台报错，找不到元素。只能自己修改了。

(1)安装wangeditor

项目跑起来之后，安装wangeditor。需要加版本安装，我目前用的是2.1.23，不知道为啥，安装其他版本还是会报错，目前没找到原因。

// 安装命令

npm install wangeditor@2.1.23 --save

(2)修改tsconfig.json文件

myPro/tsconfig.json文件，这是最终的代码。

{
  "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)添加editor模板

myPro/src/app下面添加editor模板，专门来测试这个功能。这是我的一个习惯，先弄一个独立的文件测试好功能，然后再把他放在项目中应用。

cd到myPro/src/app文件下面

// 命令生成模板

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>请输入内容...</p>
    </div>

    <button (click)="getVal()" style="margin-top: 10px;">获取内容</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() {
 	 // 以防元素获取不到
  	setTimeout(function() {
      const editordom = document.querySelector('#editorElem');
      console.log(editordom);
      if(editordom) {
        this.editor = new wangEditor(editordom)
        // 上传图片
        this.editor.config.uploadImgUrl = '/upload';
        this.editor.create();
      }
    }, 0)
  }

  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或者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: 以上代码都是最终代码，按照这样的步骤将wangeditor集成在AngularJS2的项目中，目前好用。

来源：oschina

链接：https://my.oschina.net/u/3150390/blog/2873187