Question

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

策略包括捕获每个击键并在必要时尝试替换它，例如，当插入的字符跟随点和空格时。我很好地捕捉了这个事件，但找不到解析插入位置周围字符的方法：

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();
});

我们非常感谢任何帮助，包括战略选择。

Answer 1

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

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()应该怎么样？

您必须从editor.getSelection().getRanges()开始才能获得插入位置。
您只对该系列的第一个范围感兴趣。
要从插入符号前使用小技巧提取文本内容：
- 将范围的开头移至文档的开头：range.setStartAt( editor.document.getBody(), CKEDITOR.POSITION_AFTER_START )，
- 使用CKEDITOR.dom.walker按源顺序遍历DOM树，
- 收集文本节点并找出插入之前的内容（是/\. $/） - 请记住，您必须跳过内联标记并停止在块标记上 - 提示：从false返回guard停止遍历的功能。

如何在walker上使用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()) {}

现在很少有悲伤的事情。

我们假设您在键入时选择为空 - 不必为真。当选择未折叠（空）时，您必须在调用insertText之前手动删除其内容。您可以使用range#deleteContents执行此操作。
但这不是全部 - 删除范围的内容后，你必须将插入符号放在正确的位置 - 这不是一件容易的事。基本上你可以使用range#select（在deleteContents之后的范围内），但在某些情况下，它可以将插入符放在不正确的位置 - 比如段落之间。如果没有关于HTML +可编辑+插入+其他东西的深入了解，那么修复这个是不可行的。）。
此解决方案尚未完成 - 您必须处理paste事件，删除内容（可以删除句子开头的单词等）等。
我想还有其他一些我甚至没想过的问题：P。

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

Answer 2

这在 Ckeditor 4 中对我有用。

var editor = CKEDITOR.instances.editor1;

editor.document.getBody().on('keydown', function(event) {

    if (event.data.getKeystroke() >= 65 && event.data.getKeystroke()<=91 && encodeURI(this.getText())=="%0A" && this.getText().length==1 ) {
        //uppercase the char
        editor.insertText(String.fromCharCode(event.data.getKeystroke()));
        event.data.preventDefault();
    }
});

将CKeditor中的第一个句子大写

2 个答案: