angularjs html编辑器,angularjs集成wangeditor富文本编辑器 -凯发k8官方网

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

总结

以上是凯发k8官方网为你收集整理的angularjs html编辑器,angularjs集成wangeditor富文本编辑器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。