如何通过按钮更改Tinymce编辑器的外边框颜色

要实现点击按钮修改TinyMCE编辑器的外边框颜色，直接操作编辑器的DOM容器样式即可，步骤如下：

1. 初始化TinyMCE时指定标识（可选但更精准） #

初始化编辑器时给它设置唯一ID，方便后续精准定位：

tinymce.init({
  selector: '#my-editor',
  // 其他配置项（如工具栏、插件）按需添加
});

对应的HTML编辑器容器：

<textarea id="my-editor"></textarea>

2. 添加触发按钮 #

在页面中添加用于更改边框的按钮：

<button id="change-border-btn">切换编辑器边框颜色</button>

3. 编写按钮点击事件逻辑 #

通过JavaScript给按钮绑定点击事件，获取编辑器容器后修改边框样式：

// 用状态变量实现切换效果
let isBorderChanged = false;

document.getElementById('change-border-btn').addEventListener('click', function() {
  // 通过ID获取编辑器实例
  const editor = tinymce.get('my-editor');
  if (!editor) return;

  // 获取编辑器的外层容器元素
  const editorContainer = editor.getContainer();
  
  if (isBorderChanged) {
    // 恢复默认边框
    editorContainer.style.border = '';
  } else {
    // 设置新边框样式（颜色、粗细、线型可自定义）
    editorContainer.style.border = '2px solid #ff4444';
  }
  
  // 切换状态
  isBorderChanged = !isBorderChanged;
});

补充说明 #

• 如果页面只有一个TinyMCE编辑器，也可以直接通过类选择器定位容器：document.querySelector('.tox-editor-container')（新版本TinyMCE用这个类，旧版本可能是mce-container，需根据实际版本调整）
• 边框样式可自由修改，比如改成虚线：'1px dashed #0099ff'，仅修改颜色也可使用borderColor属性

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