1.下载wangeditor
npm i wangeditor
ponent.ts之后引入我们下好的文件
import * as wangEditor from '../../../node_modules/wangeditor/release/wangEditor.js';//'../../../node_modules/wangeditor/release/wangEditor.js'这个路径不是固定的 看你创建的组件文件路径 应该比较好找 自己../ 慢慢找 vscode有提示
ponent.html 写html代码
<div class="wangeditor-box"><div id="editorMenu"></div><div id="editor" style="height:600px;max-height:1500px;"><p>{{defaultMessage}}</p></div></div>
ponent.ts 中 初始化一下我们的插件
editor: anydefaultMessage = '默认值'constructor() {}ngOnInit() {this.editor = new wangEditor("#editorMenu", "#editor")this.editor.create()}
5.完整的ts代码
import {Component, OnInit } from '@angular/core';import * as wangEditor from '../../../node_modules/wangeditor/release/wangEditor.js';@Component({selector: 'app-home',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class HomeComponent implements OnInit {editor: anydefaultMessage = '默认值'showhtmlcon = ''constructor() {}ngOnInit() {this.editor = new wangEditor("#editorMenu", "#editor")this.setEditorConfig()this.editor.create()}// 获取编辑器内容，带htmlshowhtml() {this.showhtmlcon = this.editor.txt.html();}// 设置富文本编辑器setEditorConfig() {// 菜单展示项配置this.editor.customConfig.menus = this.getMenuConfig();// 使用 base64 保存图片this.editor.customConfig.uploadImgShowBase64 = true;// 自定义配置颜色（字体颜色、背景色）this.editor.customConfig.colors = this.getColorConfig();}// 设置可选颜色getColorConfig(): string[] {return ['#ffffff','#000000','#eeece0','#1c487f','#4d80bf','#c24f4a','#8baa4a','#7b5ba1','#46acc8','#f9963b','#0076B8','#E2C08D','#8EE153','#B6001F'];}// 获取显示菜单项getMenuConfig(): string[] {return ['bold', // 粗体'italic', // 斜体'underline', // 下划线'head', // 标题'fontName', // 字体'fontSize', // 字号'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'table', // 表格'image', // 插入图片// 'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo' // 重复];}}
6.完整的html代码
<div class="wangeditor-box"><div id="editorMenu"></div><div id="editor" style="height:600px;max-height:1500px;"><p>{{defaultMessage}}</p></div></div><textarea name="" id="" cols="30" rows="10" [(ngModel)]="showhtmlcon"></textarea><button (click)=showhtml()>获取html</button>
