将CKeditor中的首字母大写 [英] Capitalize first letter of sentence in CKeditor

问题描述

当用户在CKEditor内容实例中键入文本时，我希望即时将句子的首字母大写。

I wish to capitalize the first letter of a sentence, on-the-fly, as the user types the text in a CKEditor content instance.

该策略包括捕获每个击键并在必要时尝试将其替换，例如，当插入的字符跟随点和空格时。我对赶上事件很满意，但是找不到解析插入符号位置周围字符的方法：

The strategy consists in catching each keystroke and try to replace it when necessary, that is for instance, when the inserted character follows a dot and a space. I'm fine with catching the event, but can't find a way to parse characters surrounding the caret position:

var instance = CKEDITOR.instances.htmlarea
instance.document.getBody().on('keyup', function(event) {
    console.log(event);
    // Would like to parse here from the event object...
    event.data.preventDefault();
});

包括策略选择在内的任何帮助将不胜感激。

Any help would be much appreciated including a strategy alternative.

推荐答案

您应该使用 keydown 事件（接近您的建议）：

You should use keydown event (close to what you proposed):

var editor = CKEDITOR.instances.editor1;

editor.document.getBody().on('keydown', function(event) {
    if (event.data.getKeystroke() === 65 /*a*/ && isFirstLetter()) {
        // insert 'A' instead of 'a'
        editor.insertText('A');
        event.data.preventDefault();
    }
});

现在- isFirstLetter（）的外观如何

1. 您必须从 editor.getSelection（）。getRanges（）以获得插入符的位置。


2. 您只对集合中的第一个范围感兴趣。


3. 从插入符使用之前提取文本内容一个小技巧：
   
   
   
   • 将范围的开始移动到文档的开头： range.setStartAt（editor.document.getBody（），CKEDITOR.POSITION_AFTER_START） ，
   
   
   • 使用 CKEDITOR.dom.walker 以源顺序遍历DOM树，
   
   
   • 收集文本节点并找出插入符号之前的内容（是 / \。$ / ）-请记住，您必须跳过内联标签，并且在代码块上停止-提示：从 guard 函数返回 false 停止遍历。
   
   

1. You have to start from editor.getSelection().getRanges() to get caret position.
2. You're interested only in the first range from the collection.
3. To extract text content from before the caret use small trick:
   • move start of the range to the beginning of document: range.setStartAt( editor.document.getBody(), CKEDITOR.POSITION_AFTER_START ),
   • use CKEDITOR.dom.walker to traverse through DOM tree in source order,
   • collect text nodes and find out what's before caret (is it /\. $/) - remember that you have to skip inline tags and stop on block tags - hint: return false from guard function to stop traversing.

如何在<$$上使用 walker 的示例c $ c>范围：

Example of how you can use walker on range:

var range, walker, node;

range = editor.getSelection().getRanges()[0];
range.setStartAt(editor.document.getBody(), CKEDITOR.POSITION_AFTER_START);
walker = new CKEDITOR.dom.walker(range);
walker.guard = function(node) {
    console.log(node);
};

while (node = walker.previous()) {}

现在很少有悲伤的事情了。

And now few sad things.

• 我们假设您键入的内容为空-不必一定是真的。如果选择未折叠（为空），则必须手动删除其内容，然后再调用 insertText 。您可以使用 range＃deleteContents 来做到这一点。


• 但这还不是全部-删除range的内容后，您必须将插入符号正确的位置-这并非微不足道。基本上，您可以使用 range＃select （在 deleteContents 之后的范围内），但是在某些情况下，它可以将插入符号不正确的位置-如段落之间。解决这个问题是……如果没有对HTML + editables + insertions +其他内容的深入了解，就无法做到。


• 此解决方案不完整-您必须处理粘贴事件，删除内容（可以从句子开头删除单词），等等，等等。


• 我想我还遇到了其他几个问题甚至没有想过：P。

• We assumed that selection is empty when you type - that doesn't have to be true. When selection is not collapsed (empty) then you'll have to manually remove its content before calling insertText. You can use range#deleteContents to do this.
• But this is not all - after deleting range's content you have to place caret in correct position - this isn't trivial. Basically you can use range#select (on the range after deleteContents), but in some cases it can place caret in incorrect place - like between paragraphs. Fixing this is... is not doable without deeeeeeeep knowledge about HTML+editables+insertions+other things :).
• This solution is not complete - you have to handle paste event, deleting content (one can delete words from the start of sentence), etc, etc.
• I guess there are couple of other problems I didn't even thought about :P.

所以这种方法是不现实的。如果您仍然想实现此功能，我认为您应该设置计时器并遍历DOM（可以在包含整个文档或最近输入的文本的范围内使用 walker （很难找出它所在的位置）），找到所有以小写字母开头的句子并加以修正。

So this approach isn't realistic. If you still want to implement this feature I think that you should set timer and by traversing DOM (you can use walker on range containing entire document, or recently typed text (hard to find out where it is)) find all sentences starting from lower letter and fix them.

这篇关于将CKeditor中的首字母大写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！