使用热键更改文本大小写(如 MS-Word 中的 Shift+F3)
Change case of text with hotkey (like Shift+F3 in MS-Word)
我正在使用 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;
});
editor.selection.getRng().startOffset returns the cursor position
来源:
https://drujoopress.wordpress.com/2014/08/06/find-cursor-position-inside-tinymce-editor/
Fiddle:
https://jsfiddle.net/16ssbdrn/
以下代码可能会给您想要的结果。它应该在这些情况下工作:
- 一个或多个词被完全选中
- 一个或多个单词被部分选中
- 没有选择文本
- 所选文本属于多个段落
- words里面设置了各种文本属性
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中尝试。为了简化测试,正则表达式只考虑标准的美国字符;您可能想放回您自己的代码中出现的特殊字符。
我正在使用 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;
});
editor.selection.getRng().startOffset returns the cursor position
来源: https://drujoopress.wordpress.com/2014/08/06/find-cursor-position-inside-tinymce-editor/
Fiddle:
https://jsfiddle.net/16ssbdrn/
以下代码可能会给您想要的结果。它应该在这些情况下工作:
- 一个或多个词被完全选中
- 一个或多个单词被部分选中
- 没有选择文本
- 所选文本属于多个段落
- words里面设置了各种文本属性
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中尝试。为了简化测试,正则表达式只考虑标准的美国字符;您可能想放回您自己的代码中出现的特殊字符。