配合antd Modal使用时，toolbar Modal层级有问题，而且w-e-text-container样式里会多两个overflow: hidden

[Black-Jacki]

bug 描述

配合antd Modal使用时，toolbar Modal层级有问题，而且w-e-text-container样式里会比平时多出 overflow-x: hidden; overflow-y: hidden

就会导致toolbar Modal被遮挡

但我也不确定是否是antd modal导致的，有的页面并没有这个bug，我现在只能先用更高权重的css先覆盖掉，顺便报告给你们，看是否可优化。

你预期的样子是？

不应该有overflow-x: hidden和overflow-y: hidden;

系统和浏览器及版本号

• ubuntu 20.04 LTS
• google chrome 版本 99.0.4844.82（正式版本） （64 位）

wangEditor 版本

• "@wangeditor/editor": "^0.15.15"

demo 能否复现该 bug ？

不能

• 中文 demo https://www.wangeditor.com/demo/zh-CN
• English demo https://www.wangeditor.com/demo/en

最小成本的复现步骤

/**
 * @desc 编辑器模块
 */

import React, {useRef, useEffect} from "react";
import "@wangeditor/editor/dist/css/style.css";
import {createEditor, createToolbar, IEditorConfig, IDomEditor, Boot} from "@wangeditor/editor";
import formulaModule from "@wangeditor/plugin-formula";

interface IProps {
  width?: number;
  height?: number;
  minHeight?: number;
  placeholder?: string;
  value?: string;
  onChange?: (editor: IDomEditor) => void;
}

Boot.registerModule(formulaModule);

const SimpleEditor: React.FC<IProps> = (props) => {

  const {width, height, minHeight, placeholder, value, onChange} = props;

  const editorDOMRef = useRef(null);
  const toolbarDOMRef = useRef(null);

  const editorRef = useRef(null);
  const toolbarRef = useRef(null);

  const init = () => {
    const editorConfig: Partial<IEditorConfig> = {
      placeholder: placeholder || "请输入内容...",
      // 选中公式时的悬浮菜单
      hoverbarKeys: {
        formula: {
          menuKeys: ["editFormula"], // “编辑公式”菜单
        },
      },
      onChange,
    };

    const toolbarConfig = {
      toolbarKeys: [
        "bold",
        "color",
        "bgColor",
        "fontSize",
        "emotion",
        "insertTable",
        "insertImage",
        "insertVideo",
        "insertFormula",
        "todo",
        "clearStyle",
        "redo",
        "undo",
      ],
    };

    // 创建编辑器
    editorRef.current = createEditor({
      selector: editorDOMRef.current,
      config: editorConfig,
      html: value,
      mode: "default" // 或 "simple"
    })
    // 创建工具栏
    toolbarRef.current = createToolbar({
      editor: editorRef.current,
      selector: toolbarDOMRef.current,
      config: toolbarConfig,
      mode: "default" // 或 "simple"
    })
  };

  useEffect(() => {
    init();

    return () => {
      if (editorRef.current == null) return;
      editorRef.current.destroy();
      editorRef.current = null;
    };
  }, []);

  return (
    <div style={{border: "1px solid #ccc", width, height, minHeight}}>
      <div ref={toolbarDOMRef} style={{borderBottom: "1px solid #ccc"}}/>
      <div ref={editorDOMRef}/>
    </div>
  );
};

export default SimpleEditor;

[wangfupeng1988]

好。你先用 css 覆盖吧，我们再继续看看。