最近用AngularJS2(ng alain)搭建的项目需求中须要富文本，在网上找了不少，要么过重，要么没有详细的集成步骤。css
下面将我本身如何将wangeditor集成在项目(项目名称myPro)中的，详细列出。html
具体操做步骤
操做步骤参考：node
编辑器操做参考文档：github
可是仍是没起来，控制台报错，找不到元素。只能本身修改了。json
(1)安装wangeditor
项目跑起来以后，安装wangeditor。须要加版本安装，我目前用的是2.1.23，不知道为啥，安装其余版本仍是会报错，目前没找到缘由。app
// 安装命令
npm install wangeditor@2.1.23 --save
(2)修改tsconfig.json文件
myPro/tsconfig.json文件，这是最终的代码。less
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es",
"dom"
],
// wangeditor
"allowJs": true,
"mapRoot": "./"
}
}
(3)添加editor模板
myPro/src/app下面添加editor模板，专门来测试这个功能。这是个人一个习惯，先弄一个独立的文件测试好功能，而后再把他放在项目中应用。dom
cd到myPro/src/app文件下面
// 命令生成模板
ng generate component editor
(4)myPro/src/app/editor/ponent.html
请输入内容...
获取内容
(5)myPro/src/app/editor/ponent.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: './ponent.html',
styleUrls: ['./ponent.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的项目中，目前好用。
