react+ts项目，富文本开发（wangEditor）

wangEditor概述

wangEditor是一款基于JavaScript开发的轻量级开源富文本编辑器，专注于简洁、易用和高性能。适用于Web开发中的内容编辑场景，支持主流浏览器，提供丰富的API和插件扩展能力。

核心特性

轻量高效

体积小巧（压缩后约100KB左右），加载速度快，不依赖jQuery等第三方库，纯原生JavaScript实现。

功能丰富

支持基础的文本格式（加粗、斜体、标题等）、列表、表格、图片上传、视频嵌入、代码块、链接等功能。提供撤销/重做、全屏模式等实用工具。

高度可定制

通过配置项可隐藏或扩展功能栏按钮，支持自定义插件开发。提供TypeScript类型定义，便于集成到现代前端项目中。

多框架兼容

除原生JavaScript外，提供Vue、React等主流框架的封装组件，简化集成流程。

应用场景

博客/CMS系统内容编辑
企业后台管理系统的富文本输入
教育平台的在线作业提交
社区论坛的发帖功能

官方文档和源码托管在GitHub，持续维护更新，适合需要快速集成富文本功能的项目。

安装依赖

bash 复制代码

npm install @wangeditor/editor-for-react --save

bash 复制代码

import './index.less'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import { useEffect, useState } from 'react'
import { cookieUtil } from "../../utils/cookie"
import { postRichText } from '../../api'

export default function DynamicNews() {
    // 编辑器实例状态
    const [editor, setEditor] = useState<IDomEditor | null>(null)
    // HTML内容状态
    const [html, setHtml] = useState('')
    
    // 工具栏配置
    const toolbarConfig: Partial<IToolbarConfig> = {}
    
    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {
        placeholder: '请输入内容...',
        MENU_CONF: {
            // 图片上传配置
            uploadImage: {
                server: '/api/save/image',           // 上传服务器地址
                fieldName: 'imgUrl',                 // 文件字段名
                responseType: 'json',                // 响应类型
                headers: {
                    // 设置认证头
                    Authorization: `Bearer ${cookieUtil.get("wisdom_token")}`
                },
                maxFileSize: 10 * 1024 * 1024,       // 最大文件大小 10MB
                // 自定义插入逻辑
                customInsert(res: any, insertFn: any) {
                    if (res.code === 200) {
                        let url = res.rows
                        insertFn(url,'600', '400')   // 插入图片并设置尺寸
                    }
                }
            },
            // 视频上传配置
            uploadVideo: {
                server: '/api/save/video',           // 上传服务器地址
                fieldName: 'videoUrl',               // 文件字段名
                responseType: 'json',                // 响应类型
                showMenuWhenHover: false,            // 悬停时不显示菜单
                headers: {
                    // 设置认证头
                    Authorization: `Bearer ${cookieUtil.get("wisdom_token")}`
                },
                maxFileSize: 100 * 1024 * 1024,      // 最大文件大小 100MB
                width: 600,                          // 默认宽度
                height: 400,                         // 默认高度
                // 自定义插入逻辑
                customInsert(res: any, insertFn: any) {
                    if (res.code === 200) {
                        let url = res.rows
                        insertFn(url,'600', '500')   // 插入视频并设置尺寸
                    }
                }
            }
        }
    }
    
    // 组件挂载时设置页面标题
    useEffect(() => {
        document.title = '动态资讯'
    }, [])
    
    // 组件卸载时销毁编辑器实例
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    
    return (
        <div className='DynamicNewsPage'>
            <div className='rich-text'>
                {/* 渲染工具栏 */}
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                {/* 渲染编辑器 */}
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={(editor) => setHtml(editor.getHtml())}
                    mode="default"
                    style={{ height: '500px', overflowY: 'hidden' }}
                />
            </div>
        </div>
    )
}

bash 复制代码

.DynamicNewsPage {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    padding-bottom: 50px;

    .rich-text {
        border: 1px solid #ddd;
        margin: 0 auto;
        width: 1400px;
        height: calc(100% - 60px);
        .w-e-text-container {
            video {
                max-width: 100%;
                height: auto;
                // 固定视频尺寸，防止播放时变化
                width: 600px !important;
                height: 400px !important;
                background: transparent !important;

            }

            // 控制视频容器尺寸
            .w-e-video-container {
                width: 600px !important;
                height: 400px !important;

                video {
                    width: 100% !important;
                    height: 100% !important;
                }
            }
        }
    }

}