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

一个问题：奇怪但是事件“输入”没有针对此示例中的复制粘贴等操作启动，但在我当前的应用程序中工作。似乎库的版本是相同的。但这个例子并不重要。

我希望它对某些人有用。

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

1 个答案: