如何在TinyMCE达到最大字数时修改编辑器容器边框颜色

1. 添加超限状态样式 #

首先在页面CSS中定义字数超出限制时的编辑器边框样式：

/* 自定义超限状态下的编辑器边框样式 */
.tox-editor-container.tinymce-exceeded-limit {
  border: 2px solid #dc3545 !important; /* 红色边框，可自行调整颜色 */
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* 可选：添加阴影增强提示效果 */
}

2. 修改字数统计函数，加入边框切换逻辑 #

先设定最大允许字数，然后在getWordCount函数中增加判断逻辑，根据当前字数是否超限来给编辑器容器添加/移除样式类：

// 设定最大允许字数，根据业务需求自行调整
const MAX_WORD_COUNT = 100;

function getWordCount() {
  try {
    const editor = tinymce.activeEditor;
    const count = editor.plugins.wordcount.body.getWordCount();
    webkit.messageHandlers.wordCountCallbackHandler.postMessage(count);
    
    // 获取TinyMCE的外层容器元素
    const editorContainer = editor.getContainer();
    
    // 根据字数是否超限切换样式类
    if (count >= MAX_WORD_COUNT) {
      editorContainer.classList.add('tinymce-exceeded-limit');
    } else {
      editorContainer.classList.remove('tinymce-exceeded-limit');
    }
  } catch(err) {
    console.log('The native context does not exist yet');
  }
}

3. 确保实时触发状态检查 #

你已经在编辑器的init_instance_callback、change和keyup事件中调用了getWordCount，这会自动保证：

• 编辑器初始化时立即检查字数状态
• 用户输入或修改内容时实时更新边框样式

注意事项 #

• 若使用较低版本的TinyMCE，编辑器容器类名可能不是tox-editor-container，可通过浏览器开发者工具查看实际容器类名，调整CSS选择器
• 若默认样式优先级过高，可调整CSS选择器的特异性（比如添加父元素类名），或保留!important强制覆盖原有样式

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