react-md-editor使用示例

卓能文發表於2024-08-10
import { useState } from "react";
import { Flex } from "@radix-ui/themes";
import MDEditor from "@uiw/react-md-editor";
import {
	getCommands,
	getExtraCommands,
} from "@uiw/react-md-editor/commands-cn";

export default function Index() {
	const [value, setValue] = useState("");

	return (
		<Flex direction="column" gap="2">
			<MDEditor
				commands={[...getCommands()]}
				enableScroll={false}
				extraCommands={[...getExtraCommands()]}
				height="40vh"
				onChange={(val) => {
					if (val) setValue(val);
				}}
				preview="preview"
				value={value}
			/>
		</Flex>
	);
}

存在的問題:僅僅只有一個字元時,不能刪除!如果enableScroll={true}效率比較差,一直比較卡頓。

相關文章