WangEditor 编辑器

wangEditor 基于 slate.js 为内核开发
Github https://github.com/wangeditor-team/wangEditor
网站 https://www.wangeditor.com
wangEditor 编辑器案例

• 仿腾讯文档 https://www.wangeditor.com/demo/like-qq-doc.html
• react版本 https://www.wangeditor.com/v5/for-frame.html#demo-2
• wangEditor 视频 https://www.bilibili.com/video/BV1E3411N7XB
• wangEditor 插件 https://www.wangeditor.com/v5/plugins.html

react版上手

yarn add @wangeditor/editor @wangeditor/editor-for-react

WangEditor 简洁版

import React, { useState, useEffect } from 'react'
// 可以自定义 css
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
function WangEditor() {
  // editor 实例
  const [editor, setEditor] = useState < IDomEditor | null > (null)
  // 编辑器内容
  const [html, setHtml] = useState('<p>hello</p>')
  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml('<p>hello world</p>')
    }, 1500)
  }, [])
  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (!editor) return
      editor.destroy()
      setEditor(null)
    }
  }, [editor])
  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}
  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      // fontSize: { // 覆盖默认的配置
      //   fontSizeList: [
      //     { name: '26px', value: '26px' },
      //   ],
      // }
    }
  }
  return (
    <div style={{ zIndex: 100 }}>
      <Toolbar
        editor={editor}
        defaultConfig={toolbarConfig}
        mode="simple"
        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>
  )
}
export default WangEditor