制作一个 CodeMirror 编辑器，其装订线为容器的 100% 高度

Question

如何使 CodeMirror 编辑器及其装订线为其父级高度的 100%？

例如，在 jsfiddle 上，编辑器有一个 100% 高度的灰色装订线。

我已经通过 CSS 尝试使所有内容都为 100% 高度，但没有效果。

Answer 1

像

.CodeMirror { height: 100%; }

这样的 CSS 规则应该可以工作。请注意，当父元素在编辑器初始化后更改大小时，您有责任在 CodeMirror 实例上调用

.refresh()

以确保它正确绘制自身。

Answer 2

显示 CodeMirror 时写入：

CodeMirror.setSize("100%", "100%");

Answer 3

这对我有用：

const EditorCodeArea = () => {
  const code = 'SELECT * FROM ';

  const mirrorRef = useRef(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      const outerContainer = (mirrorRef as MutableRefObject<any>).current.editor;
      const innerContainer = outerContainer.children[0];
      outerContainer.style.height = '100%';
      innerContainer.style.height = '100%';
    }, 100);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <div className={styles.main}>
      <CodeMirror
        value={code}
        theme={myTheme}
        extensions={[sql()]}
        className={styles.mirror}
        ref={mirrorRef}
      />
    </div>
  );
};