angular 结合 wangeditor 使用

　　ueditor 功能虽然丰富，但是配置起来确实麻烦，后台比较忙，没时间联调，导致图片上传的问题一直搁置，总不能一直放着呀，就想着找一个轻量级的，配置不需要那么麻烦的富文本编辑器。

　　功夫不负有心人，看了诸多的插件：ngx-quill 没有支持表格，ckeditor 配置起来跟 ueditor 差不多。。。

　　结果还真的让我找到了一个易用性的插件，而且功能也可以，满足现在的需求，因为功能比较急，就先不考虑以后的二次开发了，呲牙。

　　wangeditor，纯js+css写出来的富文本编辑器，整个js代码量才4000多行，算是轻量级的了~

　　下面开始使用流程梳理：

　　先看 demo：http://www.wangeditor.com/

　　该有的都有，那还等什么，直接安装吧： npm install wangeditor

　　然后我们创建一个组件，直接引入js文件，可能版本不同，对应包的目录结构不一样，不过最终是 wangEditor.js 就行：

　　有的 tsconfig.json 中没有配置 allowJs ，那么上面的 import 的js文件就会读不了，所以要设置一下：

　　然后我们界面中创建2个div，分别给上id，因为 wangeditor 是菜单栏编辑栏分离的，所以可以直接写成2个元素

　　接着组件加载完成，进行编辑器初始化：主要就是1个new，和 create() 方法，不配置的话会直接使用默认：

　　ng serve 启动项目可以看到功能可用：

　　到这一步就完成了，是不是配置比 ueditor 更加简单！

　　最终文件：

　　wang-editor.component.html ，这个编辑器没用那么多的api

<div class="wangeditor-box">
  <div id="editorMenu"></div>
  <div id="editor" style="height:400px;max-height:500px;">
    <p>{{defaultMessage}}</p>
  </div>

  <div class="btn-group">
    <pre class="show-message">{{showMessage}}</pre>
    <div [innerHTML]="showMessage | html"></div>
    <hr/>
    <textarea rows="4" nz-input [(ngModel)]="textareaValue" class="text-area"></textarea>
    <button class="btn-search margin-l-10" nz-button [nzType]="'primary'" [nzSize]="'normal'"
            (click)="setContent()">
      <span>设置内容</span>
    </button>
    <hr/>

    <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
            (click)="getContent()">
      <span>获取内容（html）</span>
    </button>

    <button class="btn-search" nz-button [nzType]="'primary'" [nzSize]="'normal'"
            (click)="getContentText()">
      <span>获取内容（纯文本）</span>
    </button>
  </div>
</div>

　　wang-editor.component.scss ，可以自己调整样式，我这里调整了编辑器高度

@import "~wangeditor/release/wangEditor.min.css";

.wangeditor-box {
  padding: 20px;
  overflow: auto;
  height: 100%;

  #editor{
    height: 400px;
    width: auto;
    border:1px solid #ccc;
  }
  .w-e-toolbar{
    background-color: #f1f1f1;
    border: 1px solid #ccc;
  }

  .btn-group {
    button {
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .show-message {
      margin: 10px 0;
      border: 1px solid #ccc;
      height: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }

    .text-area {
      width: 50%;
    }
    .margin-l-10 {
      margin-left: 10px;
    }
  }
}

　　wang-editor.component.ts

import { Component, ElementRef, OnInit, Renderer, ViewChild } from '@angular/core';
import { AppService } from '../../../app.service';
import * as wangEditor from '../../../../../node_modules/wangeditor/release/wangEditor.js';

/**
 * @description 富文本编辑测试组件
 */
@Component({
  selector: 'app-wang-editor',
  templateUrl: './wang-editor.component.html',
  styleUrls: [ './wang-editor.component.scss' ]
})
export class WangEditorDemoComponent implements OnInit {

  public sign = 'wang_editor';

  private editor: any;

  // 展示api获取到的数据
  public showMessage = 'Waiting for display';

  // 默认显示
  public defaultMessage = '请输入内容...';

  // 设置展示内容输入框变量
  public textareaValue = '<p><span style="font-weight: bold;"> test:</span> 用<span style="color: ' +
    'rgb(139, 170, 74);"> JS 设置的</span>内容&nbsp; &nbsp; &nbsp; &nbsp;<img src="http://img.t.sinajs' +
    '.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png"></p>';

  constructor (private appService: AppService,
               private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit () {
    this.editor = new wangEditor('#editorMenu', '#editor');
    console.log(this.editor);
    // 设置编辑器配置
    this.setEditorConfig();
    // 创建编辑器
    this.editor.create();
  }

  // 编辑器相关配置设置
  setEditorConfig () {
    // 使用 base64 保存图片
    this.editor.customConfig.uploadImgShowBase64 = true;
    // 菜单展示项配置
    // this.editor.customConfig.menus = this.getMenuConfig();
    // 自定义配置颜色（字体颜色、背景色）
    this.editor.customConfig.colors = this.getColorConfig();
    // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
    this.editor.customConfig.emotions = this.getEmotionsConfig();
    // 自定义字体
    this.editor.customConfig.fontNames = this.getFontFamilyConfig();
    // 编辑区域的z-index默认为10000
    // this.editor.customConfig.zIndex = 100;
    // 配置编辑器内容改变触发方法
    this.editor.customConfig.onchange = this.editorContentChange;
    // 编辑器获取到焦点触发方法
    this.editor.customConfig.onfocus = this.editorOnFocus;
    // 编辑器失去焦点触发方法
    this.editor.customConfig.onblur = this.editorOnBlur;
  }

  // 获取显示菜单项
  getMenuConfig (): string[] {
    return [
      'bold',  // 粗体
      'italic',  // 斜体
      'underline',  // 下划线
      'head',  // 标题
      'fontName',  // 字体
      'fontSize',  // 字号
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      'emoticon',  // 表情
      'table',  // 表格
      'image',  // 插入图片
      'video',  // 插入视频
      'code',  // 插入代码
      'undo',  // 撤销
      'redo'  // 重复
    ];
  }

  // 获取字体、背景颜色列表配置
  getColorConfig(): string[] {
    return [
      '#000000',
      '#eeece0',
      '#1c487f',
      '#4d80bf',
      '#c24f4a',
      '#8baa4a',
      '#7b5ba1',
      '#46acc8',
      '#f9963b',
      '#ffffff'
    ];
  }

  // 获取表情配置
  getEmotionsConfig() {
    return [
      {
        // tab 的标题
        title: '默认',
        // type -> 'emoji' / 'image'
        type: 'image',
        // content -> 数组
        content: [
          {
            alt: '[坏笑]',
            src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
          },
          {
            alt: '[舔屏]',
            src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
          }
        ]
      },
      {
        // tab 的标题
        title: 'emoji',
        // type -> 'emoji' / 'image'
        type: 'emoji',
        // content -> 数组
        content: ['?', '?', '?', '?', '?']
      }
    ];
  }

  // 获取字体列表配置
  getFontFamilyConfig(): string[] {
    return [
      '宋体',
      '微软雅黑',
      'Arial',
      'Tahoma',
      'Verdana'
    ];
  }

  // 富文本编辑器内容变化触发方法
  editorContentChange = (html) => {
    console.log(html);
  }

  // 编辑器获取到焦点触发事件
  editorOnFocus = () => {
    console.log('on focus');
  }

  // 编辑器失去焦点触发事件
  editorOnBlur = (html) => {
    console.log('on blur');
    console.log(html);
  }

  // 设置编辑器显示内容
  setContent() {
    this.editor.txt.html(this.textareaValue);
  }

  // 获取编辑器内容，带html
  getContent() {
    this.showMessage = this.editor.txt.html();
  }

  // 获取编辑器文字内容
  getContentText() {
    this.showMessage = this.editor.txt.text();
  }
}

　　解析的话还是 innerHtml ，管道用的是上一篇写好的管道~

　　引个地址：https://www.kancloud.cn/wangfupeng/wangeditor3/332599  ， 使用手册，很详细，很简单

　　官网：http://www.wangeditor.com/

 　　以及git：https://github.com/wangfupeng1988/wangEditor

注：

　　本地设置了 ：this.editor.customConfig.uploadImgShowBase64 = true;

　　所以没有用到后端的上传地址，转成了 base64，直接将带html标签的字符串传给后台，后台保存成文件。

转载于:https://www.cnblogs.com/guofan/p/10065466.html