Google文档的自定义键盘快捷键(更改颜色 - 背景颜色)

时间:2017-06-03 09:02:33

标签: javascript jquery google-apps-script google-docs

我想使用键盘快捷键更改Google文档中所选文本的ForegroundColor

我可以将“更改ForegroundColor”部分(使用绑定到函数setColor()的菜单项),而不是“键盘快捷键部分”。

我发现了这个code,但我无法实现它:

$(document).keydown(function(e){
  //CTRL + Q keydown combo
  if(e.ctrlKey && e.keyCode == 81){
    $( '#output' ).html("I've been pressed!");
  }
})

我的困难:

1)我不知道在我的脚本编辑器中放置此代码的位置(我尝试将其放在onOpen()函数中,如下所示,但也在其上方没有成功)。

2)我不确定$(文件)应该引用什么。

3)我不确定他们的意思是“必须先点击/激活侧边栏才能实现”。

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

3 个答案:

答案 0 :(得分:9)

在此行中,变量“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对DOM的表示。有关jQuery的更多信息http://jquery.com/

由于Google Apps脚本在Google服务器上运行,而不是在您的计算机上本地运行,因此您无法导航DOM树。您仅限于映射到Google服务器上的代码位的GAS功能。这两行代码彼此无关,也不是指同一文档。

同样适用于您可以收听的事件。虽然GAS确实有一些事件处理功能,但事件列表很短(参见“简单触发器”和“可安装触发器”)https://developers.google.com/apps-script/guides/triggers/

<强>更新

您可以通过使用HtmlService构建自己的自定义UI来实现此目的。需要注意的是,似乎无法将控制权从Google文档移交给UI元素,因此您必须在每次操作后手动将焦点设置在侧边栏上。

以下是项目中.gs文件的外观示例。将其视为您的服务器应用程序。

//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

}

以下是侧边栏模板的客户端代码。您可以通过单击文件 - &gt;在脚本编辑器中创建模板。新 - &gt; Html文件。 称之为sidebar或您为上面var htmlOutput文件中的.gs选择的内容。如果按“Ctrl + Q”,侧边栏将显示确认并调用setColor1()文件中的.gs功能。

有关从客户端https://developers.google.com/apps-script/guides/html/reference/run

调用服务器端GAS功能的更多信息

有关HtmlService的更多信息 https://developers.google.com/apps-script/guides/html/

明显的缺点是侧边栏必须首先获得焦点,所以你总是需要在做出选择后点击它。

<!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>

希望这有帮助!

答案 1 :(得分:3)

而不是像Anton Dementiev所建议的那样使用侧边栏,而是可以使用modeless dialog box。它可以从onOpen()函数或菜单项运行。

  • 侧边栏上无模式对话框的优点:对话框较小,可以在屏幕上的任何位置移动(点击标题并拖动它)
  • 不方便:在侧边栏上设置焦点更容易,因为在无模式对话框中,您必须单击对话框内容(可能非常小)来设置焦点。

.html与Anton Dementiev给出的相同,但.gs不同:

function onOpen() {
  var ui = DocumentApp.getUi();

  ui.createMenu('My Menu')
      .addItem('Open Color Dialog', 'dialogBox')
      .addToUi();

      var htmlOutput = HtmlService   // alternative to the sidebar
        .createHtmlOutputFromFile('sidebar')
        .setWidth(50)
        .setHeight(50);
      DocumentApp.getUi().showModelessDialog(htmlOutput, 'Title');  

}


  function dialogBox() {
      var htmlOutput = HtmlService
        .createHtmlOutputFromFile('sidebar')
        .setWidth(50)
        .setHeight(50);
      DocumentApp.getUi().showModelessDialog(htmlOutput, 'Title');
}

答案 2 :(得分:1)

要点击侧栏/无模式对话框并且它很笨,真的很麻烦,所以我正在使用Autohotkey。 这是一个.ahk脚本(source

#IfWinActive ahk_exe chrome.exe ; the shortcut will only work on chrome 

!^+p:: 
;PART 1: check if the docs is in full-screen (the script work with the mouse position)
; put the mouse on the right top corner of the screen, freeze the spy tool, copy past the relative position (1357, 6 ).
PixelGetColor ColorWin, 1357, 6 RGB  ; get the color of this area
; In my case this part should be white in full screen
if (ColorWin!="0xFFFFFF")   ; if it's white (= fullscreen is OFF)
    send {f11};  then press f11 to activate fullscreen

#
PixelGetColor ColorText, 647, 86 RGB  
;msgbox, 64, (%ColorText%)   ; uncomment if needed for debug to get color to

; get the mouse position and the color of each one you want

if (ColorText="0x000000") {   ;  black
    click,647, 86
    click,712, 120
    click, 786, 177 ; blue
} 
else If (ColorText="0xFF0000") {  ;  blue
    click,647, 86
    click,712, 120
    click, 767, 179 ; blue light
}

 else IF (ColorText="0xE8864A") {  ;  blue light
    click,647, 86
    click,712, 120
    click, 679, 176 ; red
}
else ; 
{
    click,647, 86
    click,712, 120
    click, 657, 151 ; black
}

return