如何通过TinyMCE API为选中区块设置最大宽度（React集成场景）

1. 自定义工具栏按钮并绑定样式设置逻辑 #

在React集成的TinyMCE配置中，通过setup函数注册自定义工具栏按钮，点击按钮时触发样式设置操作：

import { Editor } from '@tinymce/tinymce-react';

function CustomTinyMCEEditor() {
  const handleEditorSetup = (editor) => {
    // 注册自定义工具栏按钮
    editor.ui.registry.addButton('setBlockMaxWidth', {
      text: '设置区块宽度',
      icon: 'align-center', // 可选，使用TinyMCE内置图标
      onAction: () => applyBlockStyle(editor)
    });
  };

  const applyBlockStyle = (editor) => {
    // 获取当前选中的节点
    const selectedNode = editor.selection.getNode();
    // 仅对区块级元素（如div、p、section等）应用样式
    if (selectedNode && selectedNode.nodeType === Node.ELEMENT_NODE) {
      // 通过TinyMCE DOM API设置指定CSS样式
      editor.dom.setStyle(selectedNode, 'max-width', '800px');
      editor.dom.setStyle(selectedNode, 'width', '100%');
      editor.dom.setStyle(selectedNode, 'margin', '0px auto');
    }
  };

  return (
    <Editor
      apiKey="你的TinyMCE API密钥"
      init={{
        toolbar: 'undo redo | bold italic | setBlockMaxWidth', // 将自定义按钮加入工具栏
        setup: handleEditorSetup,
        // 其他TinyMCE配置项（如height、plugins等）
      }}
    />
  );
}

export default CustomTinyMCEEditor;

2. 可选：用CSS类替代行内样式 #

如果偏好语义化的类名而非行内样式，可预先定义CSS类，再通过API给选中节点添加类：

首先在全局样式或TinyMCE的content_style中定义类：

.block-centered {
  max-width: 800px;
  width: 100%;
  margin: 0px auto;
}

然后修改样式应用逻辑：

const applyBlockStyle = (editor) => {
  const selectedNode = editor.selection.getNode();
  if (selectedNode && selectedNode.nodeType === Node.ELEMENT_NODE) {
    // 添加自定义类（如需切换样式，可先执行editor.dom.removeClass移除旧类）
    editor.dom.addClass(selectedNode, 'block-centered');
  }
};

3. 支持多选区块的扩展逻辑 #

如果需要同时给多个选中的区块设置样式，可遍历选中范围内的所有区块元素：

const applyBlockStyle = (editor) => {
  const range = editor.selection.getRng();
  // 筛选选中范围内的区块级元素（可根据需求调整选择器）
  const targetBlocks = editor.dom.select('p, div, section', range.commonAncestorContainer);
  
  targetBlocks.forEach(block => {
    editor.dom.setStyle(block, 'max-width', '800px');
    editor.dom.setStyle(block, 'width', '100%');
    editor.dom.setStyle(block, 'margin', '0px auto');
  });
};

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