如何在CKEditor中动态切换文本方向

Question

在我当前的项目中，用户可以输入英语和希伯来语文本。根据当前文本，自动定义方向会很棒。例如，如果文本包含希伯来语符号，则方向应为 RTL。但如果文本不包含希伯来语，则方向为 LTR。

文本可以随时更改，我认为最好的解决方案是像在 Google 翻译服务中那样动态切换方向。

Answer 1

我没有找到已经完成的解决方案，我想提出自己的解决方案。

它的工作原理非常简单。每次更改文本时，我都会检查它是否有希伯来语符号，并在需要时更改文本方向。要在配置中应用更改（在我的例子中，它是文本的方向），我应该销毁并使用更新的配置初始化 CKEditor。

如何测试它：

尝试用英文输入内容
尝试用希伯来语输入内容，例如“שם”
尝试删除希伯来语符号
您将看到如何根据当前文本更改编辑器中的方向

代码如下：

var CKEditorConfig = {
    contentsLangDirection: 'ltr',
    forcePasteAsPlainText: true
  },
  editorInstance;

(function () {   
  // Initialise editor.
  function initEditor() {
    editorInstance = CKEDITOR.replace('editor', CKEditorConfig);
    editorInstance.on('contentDom', function () {
      var body = this.document.getBody();

      // These listeners will be deactivated once editor dies.
      // Input event to track any changes of the content
      this.editable().attachListener(body, 'input', function () {
        editorOnChange();
      });
    });
  }
  
  // On change callback.
  function editorOnChange() {
   var text = CKEDITOR.instances['editor'].getData(),
        direction = isHebrew(text) ? 'rtl' : 'ltr',
        currentDirection = CKEditorConfig.contentsLangDirection;

      // Direction was changed -> reinit CKEditor.
      if (currentDirection && currentDirection != direction) {       
        CKEditorConfig.contentsLangDirection = direction;
        CKEDITOR.instances['editor'].destroy();
        editorInstance = initEditor();
      }
  }
  
  // Checks is current text uses hebrew language or not.
  function isHebrew (text) {
    const HebrewChars = new RegExp("[\u05D0-\u05FF]+");

    if (!HebrewChars.test(text)) {
      return false;
    }
    return true;
  }
  
  // Init editor.
  initEditor();

})();

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.ckeditor.com/4.7.1/basic/ckeditor.js"></script>

<body>
  <textarea id="editor" cols="50" rows="20"></textarea>
</body>

似乎无法在此处启动 CKEditor。我看到一些错误。您可以尝试在 JSFiddle

上启动它

一个问题：很奇怪，但是事件 "input" 没有针对此示例中的复制粘贴等操作启动，但在我当前的应用程序中有效。似乎库的版本是相同的。但是对于这个例子来说不是很重要。

希望对大家有用。

如何在CKEditor中动态切换文本方向

How to dynamically switch text direction in CKEditor

ckeditor

right-to-left