在 Next.js 中使用 React-Ace

• https://github.com/securingsincity/react-ace
• https://9to5tutorial.com/notes-on-using-react-ace-in-next-js

安装 react-ace

npm install --save react-ace ace-builds

定义 AceEditor 组件

"use client";
 
import React from "react";
import dynamic from "next/dynamic";
 
const AceEditor = dynamic(
  async () => {
    const ace = await import("react-ace");
    await import("ace-builds/src-noconflict/mode-java");
    await import("ace-builds/src-noconflict/theme-github");
    await import("ace-builds/src-noconflict/ext-language_tools");
    return ace;
  },
  { ssr: false }
);

使用组件

export default function Home() {
  function onChange(newValue: string) {
    console.log("change", newValue);
  }
  return (
    <AceEditor
      mode="java"
      theme="github"
      onChange={onChange}
      name="UNIQUE_ID_OF_DIV"
      width="100%"
      editorProps={{ $blockScrolling: true }}
    />
  );
}