angularjs html编辑器,AngularJS集成wangeditor富文本编辑器

最近用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": "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模板，专门来测试这个功能。这是个人一个习惯，先弄一个独立的文件测试好功能，而后再把他放在项目中应用。dom

cd到myPro/src/app文件下面

// 命令生成模板

ng generate component editor

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

请输入内容...

获取内容

(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的项目中，目前好用。