Google文档的自定义键盘快捷键（更改颜色 - 背景颜色） [英] Custom keyboard shortcuts for Google Docs (change color - background color)
问题描述
我想用键盘快捷键更改Google文档中选定文本的 ForegroundColor 。
我可以使更改ForegroundColor部分（菜单项绑定到函数setColor（）），而不是键盘快捷键部分。
我找到了这个代码，但我在实现它时遇到了麻烦：
$ $ $ $ $ $ $ $ $（$）$（$）$（$）$（$） b if（e.ctrlKey& e.keyCode == 81）{
$（'#output'）.html（I've been pressed！）;
} $ b $
我的困难：
1）我不知道把这段代码放在我的脚本编辑器中的位置（我尝试将它放在 onOpen（）函数中，但也在下面，但没有成功） 。
2）我不确定$（document）应该引用什么。
3）我不确定它们是什么意思，必须首先点击/激活侧边栏才能发生。
函数onOpen（）{
var ui = DocumentApp.getUi（）;
ui.createMenu（'My Menu'）
.addItem（'Color'，'setColor'）
.addToUi（）;
var document = DocumentApp.getActiveDocument（）//是否应该在这里？ （e.ctrlKey&& e.keyCode == 81）{$ b $（$） $ b SpreadsheetApp.getUi（）。alert（'Hello，world！'）;
}
}）
}
函数setColor1（）{
var selection = DocumentApp.getActiveDocument（）。getSelection（）;
if（selection）{
var elements = selection.getRangeElements（）;
for（var i = 0; i< elements.length; i ++）{
var element = elements [i];
//只修改可以编辑为文本的元素;跳过图像和其他非文本元素。
if（element.getElement（）。editAsText）{
var text = element.getElement（）。editAsText（）;
//编辑元素的选定部分，或完整元素（如果完全选中）。
if（element.isPartial（））{
text.setForegroundColor（element.getStartOffset（），element.getEndOffsetInclusive（），＃00FFFF）;
} else {
text.setForegroundColor（＃00FFFF）;
}
}
}
}
}
在这一行中，变量'document'是Google Apps脚本文档中定义的'Document'对象的一个实例。
var document = DocumentApp.getActiveDocument（）
这是对位于您的云端硬盘中的Google文档的抽象，允许您使用此处介绍的一组方法修改云端硬盘文件 https://developers.google.com/apps-script/reference/document/document
以下行是jQuery语法。
$（document）.keydown（function（e）{}
jQuery是一个用于客户端开发的JavaScript库，用于浏览网页的HTML DOM树$（document）是jQuery的表示关于jQuery的更多信息 http://jquery.com/
由于Google Apps脚本在Google服务器上运行，而不是在您的计算机上本地运行，因此您无法浏览DOM树。您仅限于映射到Google服务器上代码位的GAS函数。这两行代码没有任何关系，也没有提及同一个文档。
同样适用于您可以收听的事件。虽然GAS确实有一些事件处理功能，但事件列表非常短（请参阅简单触发器和可安装触发器） https://developers.google.com/apps-script/guides/triggers/
UPDATE
strong>您可以通过使用HtmlService构建自己的自定义UI来实现此目的。需要注意的是，似乎没有办法将控制权从Google文档移交给用户界面元素，因此您必须在每次操作后手动在侧边栏上设置焦点。
以下是项目中 .gs 文件的样例。
//从模板创建html输出
函数onOpen（）{
var ui = DocumentApp.getUi（）;
var htmlOutput = HtmlService.createTemplateFromFile（'sidebar'）。evaluate（）;
ui.showSidebar（htmlOutput）;
函数setColor1（）{
//您的代码
}
以下是我用于侧栏模板的客户端代码。您可以通过单击文件 - >新建 - > Html文件在脚本编辑器中创建模板。
在中将或您为 var htmlOutput 选择的任何内容称为它。 gs 上面的文件。如果按'Ctrl + Q'，边栏将显示确认信息，并在 .gs setColor1（）函数c>文件。
有关从客户端调用服务器端GAS功能的更多信息 https://developers.google.com/apps-script/guides/html/reference/run
更多在HtmlService
https://developers.google.com/apps-script/指南/ html /
显而易见的缺点是侧栏必须先获取焦点，因此您需要在做出选择后点击它。
<！DOCTYPE html>
< html>
< head>
< base target =_ top>
< / head>
< body>
< p>按Ctrl + Q更改所选文字的颜色< / p>
< p id =log> < / p为H.
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script>
< script>
$（document）.ready（function（）{
$（document）.keydown（function（e）{
if（e .ctrlKey& e.keyCode == 81）{
$（'＃log'）。html（'你按Ctrl + Q'）;
google .script.run.setColor1（）;
}
}）;
}）;
< / script>
< / body>
< / html>
希望这有助于您！
I would like to change the ForegroundColor of a selected text in a Google Docs with a keyboard shortcut.
I could make the "change the ForegroundColor" part (with a menu item bound to the function setColor() ), but not the "keyboard shortcut part".
I found this code but I have trouble implementing it:
$(document).keydown(function(e){
//CTRL + Q keydown combo
if(e.ctrlKey && e.keyCode == 81){
$( '#output' ).html("I've been pressed!");
}
})
My difficulties :
1) I am not sure where to place this code in my script editor (I tried to place it in the onOpen() function as below, but also above it without success).
2) I am not sure what the $(document) should refer to.
3) I am not sure what they mean by "having to click on / activate the sidebar first for that to happen".
function onOpen() {
var ui = DocumentApp.getUi();
ui.createMenu('My Menu')
.addItem('Color', 'setColor')
.addToUi();
var document = DocumentApp.getActiveDocument() // should it be here?
$(document).keydown(function(e){
//CTRL + Q keydown combo
if(e.ctrlKey && e.keyCode == 81){
SpreadsheetApp.getUi().alert('Hello, world!');
}
})
}
function setColor1() {
var selection = DocumentApp.getActiveDocument().getSelection();
if (selection) {
var elements = selection.getRangeElements();
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
// Only modify elements that can be edited as text; skip images and other non-text elements.
if (element.getElement().editAsText) {
var text = element.getElement().editAsText();
// Edit the selected part of the element, or the full element if it's completely selected.
if (element.isPartial()) {
text.setForegroundColor(element.getStartOffset(), element.getEndOffsetInclusive(), "#00FFFF");
} else {
text.setForegroundColor("#00FFFF");
}
}
}
}
}
In this line, the variable 'document' is an instance of the 'Document' object as defined in Google Apps Script documentation.
var document = DocumentApp.getActiveDocument()
It's an abstraction over the Google Document sitting in your Drive that allows you to modify your Drive files using a set of methods described here https://developers.google.com/apps-script/reference/document/document
The line below is jQuery syntax.
$(document).keydown(function(e){}
jQuery is a JavaScript library for client-side development. It is used for navigating the HTML DOM tree of a webpage. $(document) is jQuery's representation of the DOM. More on jQuery http://jquery.com/
Because Google Apps Script runs on Google servers, not locally on your machine, there's no DOM tree for you to navigate. You are limited to GAS functions that are mapped to bits of code on Google servers. These two lines of code have nothing to do with each other and are not referring to the same document.
Same applies to events that you can listen to. While GAS does have some event handling capabilities, the list of events is quite short (see 'Simple Triggers' and Installable Triggers') https://developers.google.com/apps-script/guides/triggers/
UPDATE
You can achieve this by building your own custom UI using HtmlService. The caveat is that there seems to be no way to hand over control from Google Document to the UI element, so you'll have to manually set focus on the sidebar after each action.
Here's the example of how the .gs file in your project may look like. Treat this as your server app.
//creates html output from the template
function onOpen(){
var ui = DocumentApp.getUi();
var htmlOutput = HtmlService.createTemplateFromFile('sidebar').evaluate();
ui.showSidebar(htmlOutput);
}
function setColor1(){
//your code
}
Below is my client-side code for the sidebar template. You create the template in your Script Editor by clicking on File -> New -> Html file.
Call it sidebar or whatever you choose for the var htmlOutput in the .gsfile above. If you press 'Ctrl + Q', the sidebar will display a confirmation and call the setColor1() function in your .gs file.
More on calling server-side GAS functions from the client https://developers.google.com/apps-script/guides/html/reference/run
More on HtmlService https://developers.google.com/apps-script/guides/html/
The obvious downside is that the sidebar must acquire focus first, so you always need to click on it after making a selection.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p> Press Ctrl + Q to change the color of selected text </p>
<p id="log"> </p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).keydown(function(e){
if(e.ctrlKey && e.keyCode == 81){
$('#log').html('you pressed Ctrl + Q');
google.script.run.setColor1();
}
});
});
</script>
</body>
</html>
Hope this helps!
这篇关于Google文档的自定义键盘快捷键（更改颜色 - 背景颜色）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
