如何在CKEditor中動態切換文本方向

在我目前的項目中，用戶可以用英文和希伯來語輸入文本。根據當前的文字，自動定義方向會很好。例如，如果文本包含希伯來語符號，則方向應該是RTL。但是如果文本不包含希伯來文，那麼方向是LTR。如何在CKEditor中動態切換文本方向

文字可隨時更改，我認爲最好的解決方案是像在Google翻譯服務中一樣動態切換方向。

來源

2017-09-20 Eugene

我沒有找到已經完成的解決方案，我想提出自己的解決方案。

它很簡單。每當文本發生變化時，我都會檢查希伯來文符號，如果需要，我會更改文本方向。要在配置中應用更改（在我的情況下它是文本的方向），我應該銷燬並使用更新的配置初始化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() { 
 
    \t var text = CKEDITOR.instances['editor'].getData(), 
 
     direction = isHebrew(text) ? 'rtl' : 'ltr', 
 
     currentDirection = CKEditorConfig.contentsLangDirection; 
 

 
     // Direction was changed -> reinit CKEditor. 
 
     if (currentDirection && currentDirection != direction) {  \t 
 
     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

一個問題：奇怪，但事件「輸入」不會啓動此複製粘貼在此示例中的操作，但在我當前的應用程序中工作。似乎庫的版本是相同的。但這個例子並不重要。

我希望這會對某個人有用。

來源

2017-09-20 06:19:03 Eugene

如何在CKEditor中動態切換文本方向

回答

相關問題