react 基于wangeditor 封装富文本编辑器

59 阅读 0 评论 39 点赞

我是靠谱客的博主彪壮雪糕，最近开发中收集的这篇文章主要介绍react 基于wangeditor 封装富文本编辑器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

import React, { Component } from 'react';
import E from 'wangeditor';
import styles from './index.less';
// import xss from 'xss';

const editorConfig = {
  menus: [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    // 'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    // 'quote',  // 引用
    'emoticon',  // 表情
    // 'image',  // 插入图片
    'table',  // 表格
    // 'video',  // 插入视频
    // 'code',  // 插入代码
    'undo',  // 撤销
    'redo',  // 重复
  ], // 自定义菜单配置
  // fontNames: [
  //   '微软雅黑',
  // ], // 字体配置
  emotions: [
    {
      title: '默认', // tab 的标题
      type: 'image', // type -> 'emoji' / 'image'
      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'
        // },
        {
          alt: '[旗帜]',
          src: 'http://doc.crland.com.cn:8008/api.action?acmod=downloadcommfile&id=25655820&revision=0&apikey=506fa76acb7d592e0338fec5db196055&usid=fbd672e88c900f26a0221af266cd22ba-fe1b9a223ba095ff-attachment',
        },
        // {
        //   alt: '[舔屏]',
        //   src: 'http://10.72.1.112:6802/api.action?acmod=downloadcommfile&id=6998684&revision=0&apikey=b1efe84b064a4c2ef9277cd8b7a54e30&usid=aa399cbf91b0e5d21116e74337c3c691-fe1b9a223ba095ff-erp3'
        // }
      ], // content -> 数组
    },
  ], // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
  pasteIgnoreImg: true, // 忽略粘贴内容中的图片
  zIndex: 0, // 编辑框z-index设置
}; // 编辑器配置项

class RichEditor extends Component {
  constructor(props) {
    super(props);
    this.onEditorChange = this.onEditorChange.bind(this); // 组件回调
    this.richEditor = '';
  }

  componentDidMount() {
    const {
      editorId = 'editorId', // 富文本编辑器唯一标识
      defaultText = '', // 默认文本
      isCanEdit = true, // 是否可编辑
    } = this.props;
    const createDOMPurify = require('dompurify');
    const { JSDOM } = require('jsdom');
    const window = (new JSDOM('')).window;
    const DOMPurify = createDOMPurify(window);
    const elem = this.refs[editorId]
    this.richEditor = new E(elem); // 富文本编辑器
    this.richEditor.customConfig = editorConfig; // 配置项
    // 自定义处理粘贴的文本内容
    this.richEditor.customConfig.pasteTextHandle = function(content) {
      let node = document.createElement('span');
      node.innerHTML = DOMPurify.sanitize(content);
      node.querySelectorAll('*').forEach(function(el) {
        el.removeAttribute('class');
        el.removeAttribute('font');
        el.removeAttribute('size');
        el.removeAttribute('width');
        el.removeAttribute('height');
        el.removeAttribute('valign');
        el.removeAttribute('border');
      });
      return node.innerHTML;
    };
    // this.richEditor.customConfig.pasteTextHandle = function (content) { var node=document.createElement("span"); node.innerHTML=DOMPurify.sanitize(content); node.querySelectorAll('td,th').forEach(function(el){ el.innerHTML=el.innerHTML.replace(/</?p[^>]*>/gi,''); }); node.querySelectorAll('*').forEach(function(el){ el.removeAttribute("class"); el.removeAttribute("style"); el.removeAttribute("font"); el.removeAttribute("size"); el.removeAttribute("width"); el.removeAttribute("height"); el.removeAttribute("valign"); el.removeAttribute("border"); }); return node.innerHTML; }
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    this.richEditor.customConfig.onchange = html => {
      console.log('2222', html)
      this.onEditorChange(html);
    };
    this.richEditor.create(); // 生成编辑器
    this.richEditor.txt.html(defaultText); // 设置初始html内容
    this.richEditor.$textElem.attr('contenteditable', isCanEdit); // 编辑器是否可用
  }

  componentWillReceiveProps(nextProps) {
    const {
      isCanEdit = true, // 是否可编辑
    } = nextProps;
    this.richEditor.$textElem.attr('contenteditable', isCanEdit); // 编辑器是否可用
  }

  onEditorChange(html) {
    this.props.onEditorChange(html);
  }

  render() {
    const {
      editorId = 'editorId', // 富文本编辑器唯一标识
    } = this.props;
    return <div ref={editorId} className={styles.richEditor} style={{ textAlign: 'left' }}/>;
  }
}

export default RichEditor;