如何在CKEditor中动态切换文本方向 [英] How to dynamically switch text direction in CKEditor
问题描述
在我当前的项目中，用户可以用英语和希伯来语输入文本。
根据当前文本自动定义方向会很棒。例如，如果文本包含希伯来语符号，则方向应为RTL。但是，如果文本不包含希伯来语，则说明的方向是LTR。
On my current project, users can type text in English and Hebrew languages. Would be great to define direction automatically, according to the current text. For example, if the text contains Hebrew symbols, the direction should be RTL. But if the text doesn't contain Hebrew, then the direction is LTR.
文本可以随时更改，我认为最好的解决方案是切换
Text can be changed at any moment, and I think that the best solution is to switch the direction dynamically like it works in the Google Translate service.
推荐答案
我没有找到已经完成的解决方案，所以我想提出我的建议
I didn't find already done solution and I want to propose my own.
它的工作非常简单。每次更改文本后，我都会检查它的希伯来符号，并在需要时更改文本方向。要在配置中应用更改（在我的情况下是文本的方向），我应该使用更新的配置销毁并初始化CKEditor。
It works pretty simply. Each time, when text has been changed, I'm checking it for Hebrew symbols and I change the text direction if need. To apply changes in config (in my case it's direction of the text), I should destroy and init CKEditor with updated config.
如何测试它：
- 尝试用英语键入内容
- 尝试用希伯来语键入内容，例如שם
- 尝试删除希伯来符号
- 您将看到如何根据当前文本更改编辑器的方向
- Try to type something in English
- Try to type something in Hebrew, for example, "שם"
- Try to remove Hebrew symbols
- You will see how the direction in editor will be changed according to current text
以下是代码：
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
Seems CKEditor cannot be launched here. I see some error. You can try to launch it right on JSFiddle
一个问题：奇怪，但是在此示例中，未为诸如复制粘贴之类的操作启动事件输入，而是在当前应用程序中运行。似乎库的版本是相同的。
One problem: strange but event "input" is not launched for operations like copy-paste in this example, but work in my current application. Seems versions of libraries are the same. But it's not very important for this example.
我希望它对某人有用。
这篇关于如何在CKEditor中动态切换文本方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
