如何在react-draft-wysiwyg编辑器底部添加保存与取消按钮？

核心思路 #

把原来onBlur自动保存改成手动触发模式，通过控制编辑状态切换「评论展示/编辑器+按钮」视图，点击按钮执行保存或取消操作。

具体实现步骤 #

1. 添加组件状态
   在组件里新增两个状态：

• isEditing：控制是否处于编辑模式（默认false，显示评论内容）
• originalEditorState：存储编辑前的原始内容，用于取消编辑时重置

2. 重构布局与逻辑
   用条件渲染区分展示/编辑模式，编辑模式下显示编辑器和保存/取消按钮：

import { EditorState, convertToRaw, convertFromRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

class CommentEditor extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态：默认非编辑模式，从props传入的评论内容生成editorState
    const initialContent = convertFromRaw(JSON.parse(props.commentContent));
    this.state = {
      isEditing: false,
      editorState: EditorState.createWithContent(initialContent),
      originalEditorState: EditorState.createWithContent(initialContent),
    };
  }

  // 编辑器内容变化时更新状态
  onEditorStateChange = (editorState) => {
    this.setState({ editorState });
  };

  // 进入编辑模式
  enterEditMode = () => {
    this.setState({ isEditing: true });
  };

  // 保存评论
  saveComment = () => {
    // 将编辑器内容转为可存储的JSON格式
    const content = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()));
    // 调用你的评论更新逻辑
    this.updateComment(content);
    // 退出编辑模式，更新原始内容为最新保存版本
    this.setState({
      isEditing: false,
      originalEditorState: this.state.editorState,
    });
  };

  // 取消编辑，重置内容
  cancelEdit = () => {
    this.setState({
      isEditing: false,
      editorState: this.state.originalEditorState,
    });
  };

  // 你的原有评论更新方法
  updateComment = (content) => {
    // 这里写实际的更新逻辑，比如调用后端接口
    console.log('保存的评论内容:', content);
  };

  render() {
    const { isEditing, editorState } = this.state;
    // 非编辑模式下展示评论内容（建议用draft-js-to-html转成HTML渲染）
    const commentContent = JSON.stringify(convertToRaw(editorState.getCurrentContent()));

    return (
      <div className="comment-container">
        {!isEditing ? (
          <div className="comment-content">
            {commentContent}
            <button onClick={this.enterEditMode}>编辑</button>
          </div>
        ) : (
          <div className="edit-container">
            <Editor
              editorState={editorState}
              wrapperClassName="demo-wrapper"
              onEditorStateChange={this.onEditorStateChange}
              // 移除原有onBlur自动保存，改用按钮触发
            />
            <div className="button-group">
              <button onClick={this.saveComment}>保存</button>
              <button onClick={this.cancelEdit}>取消</button>
            </div>
          </div>
        )}
      </div>
    );
  }
}

样式调整（贴近Teams风格） #

给按钮组加简单CSS，模拟Teams的视觉样式：

.button-group {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.button-group button {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button-group button:first-child {
  background-color: #0078d4;
  color: white;
}
.button-group button:last-child {
  background-color: transparent;
  color: #0078d4;
}
.comment-content button {
  background: none;
  border: none;
  color: #0078d4;
  cursor: pointer;
  margin-left: 8px;
}

注意事项 #

• 如果需要把Draft内容转换成HTML展示，建议使用draft-js-to-html包
• 确保updateComment方法能正确处理convertToRaw生成的JSON格式内容

内容的提问来源于stack exchange，提问作者Ashok