如何在SharePoint Framework(React)中点击按钮设置Monaco Editor的值？

核心逻辑 #

Monaco Editor无法像原生textarea那样直接通过DOM ref修改内容，必须先获取编辑器实例，再调用其内置API完成值的设置。

步骤实现 #

1. 获取编辑器实例

使用@pnp/spfx-controls-react的MonacoEditor组件时，通过onMount回调捕获编辑器实例，并用useRef（函数组件）或类实例变量（类组件）存储：

函数组件示例：

import { MonacoEditor } from '@pnp/spfx-controls-react/lib/MonacoEditor';
import { useRef } from 'react';

export const CustomCssEditor = () => {
  // 用useRef存储编辑器实例
  const editorRef = useRef<any>(null);

  // 挂载时保存实例
  const handleEditorMount = (editor: any) => {
    editorRef.current = editor;
  };

  return (
    <MonacoEditor
      onMount={handleEditorMount}
      value={`:root {
 --primaryColor: /*value to replace*/;
--secondaryColor: /*value to replace*/;
}`}
      language="css"
      height="200px"
    />
  );
};

2. 按钮点击时设置内容

在按钮的点击事件中，调用编辑器实例的setValue方法即可直接替换编辑器内的文本：

// 函数组件中新增按钮点击事件
const handleSetPrimaryColor = (selectedColor: string) => {
  // 仅展示设置逻辑，替换逻辑可按需自行处理
  const updatedCss = `:root {
 --primaryColor: ${selectedColor};
--secondaryColor: /*value to replace*/;
}`;
  
  if (editorRef.current) {
    editorRef.current.setValue(updatedCss);
  }
};

// 渲染按钮
<button onClick={() => handleSetPrimaryColor('#2196F3')}>设置主色</button>

3. 类组件适配示例

如果你的SPFx Web Part是类组件，用实例变量存储编辑器即可：

import { MonacoEditor } from '@pnp/spfx-controls-react/lib/MonacoEditor';

export default class CustomCssWebPart extends BaseClientSideWebPart<ICustomCssWebPartProps> {
  private editorInstance: any;

  private handleEditorMount = (editor: any) => {
    this.editorInstance = editor;
  };

  private handleSetPrimaryColor = (selectedColor: string) => {
    const updatedCss = `:root {
 --primaryColor: ${selectedColor};
--secondaryColor: /*value to replace*/;
}`;
    
    if (this.editorInstance) {
      this.editorInstance.setValue(updatedCss);
    }
  };

  public render(): React.ReactElement<ICustomCssWebPartProps> {
    return (
      <div>
        <MonacoEditor
          onMount={this.handleEditorMount}
          value={`:root {
 --primaryColor: /*value to replace*/;
--secondaryColor: /*value to replace*/;
}`}
          language="css"
          height="200px"
        />
        <button onClick={() => this.handleSetPrimaryColor('#2196F3')}>设置主色</button>
      </div>
    );
  }
}

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