当前位置：首页 > React

react如何编辑器就好了

2026-01-26 00:25:17React

在React中实现编辑器功能

React中实现编辑器功能可以通过多种方式，常见的方案包括使用现成的富文本编辑器库或自定义实现。以下是几种主流方法：

使用现成的富文本编辑器库

Draft.js Facebook开发的富文本编辑器框架，适合需要高度自定义的场景：

import { Editor, EditorState } from 'draft-js';

function MyEditor() {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());

  return (
    <Editor 
      editorState={editorState} 
      onChange={setEditorState}
    />
  );
}

Slate.js 可完全定制的框架式编辑器，支持Markdown和富文本：

react如何编辑器就好了

import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';

const initialValue = [{ type: 'paragraph', children: [{ text: '' }] }];

function MyEditor() {
  const [editor] = useState(() => withReact(createEditor()));
  const [value, setValue] = useState(initialValue);

  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable />
    </Slate>
  );
}

Quill.js 轻量级但功能强大的WYSIWYG编辑器：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function MyEditor() {
  const [value, setValue] = useState('');

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}

自定义简单编辑器

对于基础需求，可以结合contentEditable属性实现：

react如何编辑器就好了

function SimpleEditor() {
  const [html, setHtml] = useState('<p>Edit me</p>');

  return (
    <div
      contentEditable
      dangerouslySetInnerHTML={{ __html: html }}
      onInput={e => setHtml(e.currentTarget.innerHTML)}
    />
  );
}

代码编辑器实现

使用Monaco Editor（VS Code同款引擎）：

import Editor from '@monaco-editor/react';

function CodeEditor() {
  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// your code here"
    />
  );
}