react+typescript中使用wangeditor的坑

在react+typescript中使用富文本wangeditor

第一步：安装

npm install wangeditor --save-dev

第二步：引入

import E from 'wangeditor'

这里会提示你要安装 npm install @types/wangeditor，执行这行代码一直报404找不到这个依赖包，这个时候我们就要去 .d.ts 文件中去适配

第三步：配置.d.ts文件

declare module '*.css' {
     
  const styles: any;
  export = styles;
}

declare module '*.jpg' {
     
  const jpgs: any;
  export = jpgs;
}

declare module '*.png' {
     
  const pngs: any;
  export = pngs;
}

declare module '*.gif' {
     
  const gifs: any;
  export = gifs;
}

declare module '*.json' {
     
  const json: any;
  export = json;
}
declare module 'wangeditor' {
     
  const wangeditor: any;
  export = wangeditor
}

适配完最后的wangeditor之后报错就消失了，富文本也可以正常使用

第四步：使用

import React, {
      Component } from 'react';
import E from 'wangeditor'
// import { inject, observer } from 'mobx-react'
// import { withRouter } from 'react-router-dom'

// @withRouter @inject('appStore') @observer

interface Props{
     

}
interface state{
     
    editorContent:string
}
class Editor extends Component<Props,state> {
     
    constructor(props:Props) {
     
        super(props);
        this.state = {
     
            editorContent:''
         };
    }

    componentDidMount() {
     
        const elemMenu = ".editorElem-menu";
        const elemBody = ".editorElem-body";
        const editor = new E(elemMenu,elemBody)
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = (html:any) => {
     
            console.log(editor.txt.html())
            this.setState({
     
                // editorContent: editor.txt.text()
                editorContent: editor.txt.html()
            })
        }
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.customConfig.uploadImgShowBase64 = true
        editor.create()
    };

    render() {
     
        return (
            <div className="shop">
                <div className="text-area" >
                    <div ref="editorElemMenu"
                         style={
     {
     backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}
                         className="editorElem-menu">
                    </div>
                    {
     /* 
中间隔离带
 */}
                    <div
                        style={
     {
     
                            height:300,
                            border:"1px solid #ccc",
                            borderTop:"none"
                        }}
                        ref="editorElemBody" className="editorElem-body">
                    </div>
                </div>
            </div>
        );
    }
}

export default Editor;