javascript - 使用热键更改文本大小写(如 MS-Word 中的 Shift+F3)

Question

我正在使用 tinymce 插件，并且我正在尝试像在 MS Word (shift + f3) 中一样在热键上执行更改字母大小写功能。

我已经设法通过选择来做到这一点，但即使没有选择单词，MS Word 也能正常工作。

它根据光标的当前位置在该位置分离出一个词并将功能应用于该词。我需要同样的 tinymce。

到目前为止我有这个:

editor.addShortcut("ctrl+e", "ll", function () {
    var sel = editor.dom.decode(editor.selection.getContent());
    if (/^[a-zа-я]+$/g.test(sel)) {
        sel = sel.substr(0, 1).toUpperCase() + sel.substr(1);
    }
    else if (/^[А-ЯA-Z]+$/g.test(sel)) {
        sel = sel.toLowerCase();
    }
    else {
        sel = sel.toUpperCase();
    }
    editor.selection.setContent(sel);
    console.log(editor.selection);
    editor.save();
    editor.isNotDirty = true;
});

Answer 1

以下代码可能会给您想要的结果。它应该在这些情况下工作:

• 一个或多个词被完全选中
• 一个或多个单词被部分选中
• 没有选择文本
• 所选文本属于多个段落
• 在单词中设置各种文本属性

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    setup: function (editor) {

        editor.addShortcut("ctrl+e", "ll", function () {

            var isWordChar = function (chr) {
                return /\w/.test(chr);
            };

            var isTextNode = function (node) {
                return node.nodeType == 3;
            };

            var getAllTextNodes = function (result, node) {
                if (isTextNode(node)) {
                    result.push(node);
                }
                else if (node.childNodes) {
                    if (node.tagName == 'P') {
                        result.push(node);
                    }
                    var children = node.childNodes;
                    for (var i = 0; i < children.length; i++) {
                        getAllTextNodes(result, children[i]);
                    }
                }
                return result;
            }

            // Get current selection parameters
            var range = editor.selection.getRng();
            var isCollapsed = editor.selection.isCollapsed();
            var selStartChildNode = range.startContainer;
            var selEndChildNode = range.endContainer;
            var selStartOffset = range.startOffset;
            var selEndOffset = range.endOffset;

            // Retrieve all the text nodes in the editor
            var textNodes = [];
            getAllTextNodes(textNodes, editor.dom.getRoot());

            var selStartNodeIndex = textNodes.indexOf(selStartChildNode);
            var selEndNodeIndex = textNodes.indexOf(selEndChildNode);
            var wordStartNodeIndex, wordEndNodeIndex;
            var wordStartOffset, wordEndOffset;
            var wordTextContent = '';
            var found = false;
            var node, chr, lastCharIndex;
            var i, j;

            // Find the start of the first selected word
            for (i = selStartNodeIndex; i >= 0 && !found; i--)
            {
                node = textNodes[i];
                if (isTextNode(node)) {
                    wordStartNodeIndex = i;
                    lastCharIndex = node.textContent.length - 1;
                    wordStartOffset = Math.max(0, Math.min(lastCharIndex, node == selStartChildNode ? selStartOffset - 1 : lastCharIndex));
                    for (; wordStartOffset >= 0; wordStartOffset--) {
                        chr = node.textContent[wordStartOffset];
                        if (isWordChar(chr)) {
                            wordTextContent = chr + wordTextContent;
                        } else {
                            found = true;
                            break;
                        }
                    }
                } else {
                    found = true;
                    break;
                }
            }

            wordStartOffset = Math.max(0, wordStartOffset);

            var endNodeFound = false;
            var pastEndNode = false;
            var isAfterSelection = false;
            found = false;

            // Find the end of the last selected word
            for (i = selStartNodeIndex; i < textNodes.length && !found; i++) {
                node = textNodes[i];
                pastEndNode = endNodeFound;
                if (isTextNode(node)) {
                    wordEndNodeIndex = i;
                    wordEndOffset = Math.min(node == selStartChildNode ? selStartOffset : 0, node.textContent.length - 1);
                    endNodeFound = endNodeFound || node == selEndChildNode;

                    for (; wordEndOffset < node.textContent.length; wordEndOffset++) {
                        chr = node.textContent[wordEndOffset];
                        isAfterSelection = pastEndNode || (endNodeFound && wordEndOffset >= selEndOffset - (isCollapsed ? 0 : 1));
                        if (isWordChar(chr) || !isAfterSelection) {
                            wordTextContent = wordTextContent + chr;
                        } else {
                            found = true;
                            break;
                        }
                    }
                } else if (pastEndNode) {
                    found = true;
                    break;
                }
            }

            // Determine the case style to be applied
            var caseMode = '';
            if (/^([a-z0-9]|\W)+$/g.test(wordTextContent)) {
                caseMode = 'CapitalizeWords';
            }
            else if (/^([A-Z0-9]|\W)+$/g.test(wordTextContent)) {
                caseMode = 'LowerCase';
            }
            else {
                caseMode = 'UpperCase';
            }

            var startCharIndex, endCharIndex, currentIsWordChar;
            var prevIsWordChar = false;
            var content = '';

            // Apply the new case style to the selected nodes
            for (i = wordStartNodeIndex; i <= wordEndNodeIndex; i++) {
                node = textNodes[i];
                if (isTextNode(node)) {
                    startCharIndex = (i == wordStartNodeIndex ? wordStartOffset : 0);
                    endCharIndex = (i == wordEndNodeIndex ? wordEndOffset : node.textContent.length);
                    content = node.textContent.substring(0, startCharIndex);
                    switch (caseMode) {
                        case 'CapitalizeWords':
                            for (j = startCharIndex; j < endCharIndex; j++) {
                                chr = node.textContent[j];
                                currentIsWordChar = /\w/.test(chr);
                                content += (currentIsWordChar && !prevIsWordChar ? chr.toUpperCase() : chr);
                                prevIsWordChar = currentIsWordChar;
                            }
                            break;
                        case 'LowerCase':
                            content += node.textContent.substring(startCharIndex, endCharIndex).toLowerCase();
                            break;
                        case 'UpperCase':
                            content += node.textContent.substring(startCharIndex, endCharIndex).toUpperCase();
                            break;
                    }
                    content += node.textContent.substring(endCharIndex);
                    node.textContent = content;
                } else {
                    prevIsWordChar = false;
                }
            }

            // Restore the selection range
            range.setStart(selStartChildNode, selStartOffset);
            range.setEnd(selEndChildNode, selEndOffset);
            editor.selection.setRng(range);

            editor.save();
            editor.isNotDirty = true;
        });
    }
});

你可以在this jsfiddle中试试.为了简化测试，正则表达式只考虑标准的美国字符；您可能希望放回出现在您自己的代码中的特殊字符。