如何实现TinyMCE编辑器在阿拉伯语等RTL语言下自动切换为RTL方向？

TinyMCE 可以实现输入阿拉伯语、乌尔都语、希伯来语等RTL语言时自动切换排版方向，以下是几种可行的实现方式：

• 基于字符检测的自动切换
  通过监听编辑器的input事件，检测输入内容中是否包含RTL语言的字符（匹配对应Unicode范围），动态调整编辑器内容区的排版方向：

  tinymce.init({
    selector: '#editor',
    setup: function(editor) {
      editor.on('input', function() {
        const plainText = editor.getContent({ format: 'text' });
        // 匹配常见RTL语言的Unicode字符范围
        const rtlCharRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF]/;
        const isRtlContent = rtlCharRegex.test(plainText);
        
        editor.getBody().style.direction = isRtlContent ? 'rtl' : 'ltr';
        editor.getBody().style.textAlign = isRtlContent ? 'right' : 'left';
      });
    }
  });
  

• 补充手动切换按钮
  为了覆盖特殊场景（比如混合LTR/RTL内容），可以在工具栏添加手动切换按钮，让用户自主控制排版方向：

  tinymce.init({
    selector: '#editor',
    toolbar: 'rtlToggle ltrToggle',
    setup: function(editor) {
      editor.ui.registry.addButton('rtlToggle', {
        text: '切换为RTL',
        onAction: function() {
          editor.getBody().style.direction = 'rtl';
          editor.getBody().style.textAlign = 'right';
        }
      });
      editor.ui.registry.addButton('ltrToggle', {
        text: '切换为LTR',
        onAction: function() {
          editor.getBody().style.direction = 'ltr';
          editor.getBody().style.textAlign = 'left';
        }
      });
    }
  });
  

• 精准语言识别（进阶）
  如果需要更准确的语言判断，可以集成轻量的本地语言检测库（无需外部依赖），通过识别输入内容的语言类型来切换方向，避免单一字符检测的误判。

内容的提问来源于stack exchange，提问作者Ali Shakir Hassan Al-Assam