javascript - script - Accesos directos de teclado personalizados para Google Docs(cambio de color-color de fondo)

google script examples html

Question

Me gustaría cambiar el ForegroundColor de ForegroundColor de un texto seleccionado en Google Docs con un atajo de teclado.

Podría hacer que la parte "cambiar el Color de primer plano" (con un elemento de menú vinculado a la función setColor ()), pero no la "parte de acceso directo de teclado".

Encontré este código pero tengo problemas para implementarlo:

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

Mis dificultades:

1) No estoy seguro de dónde colocar este código en mi editor de scripts (traté de colocarlo en la función onOpen() como a continuación, pero también arriba sin éxito).

2) No estoy seguro de a qué debe referirse el $ (documento).

3) No estoy seguro de lo que quieren decir con "tener que hacer clic / activar la barra lateral primero para que eso suceda".

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

Answer 1

En esta línea, la variable ''documento'' es una instancia del objeto ''Documento'' tal como se define en la documentación de Google Apps Script.

var document = DocumentApp.getActiveDocument() 

Es una abstracción sobre el Documento de Google que se encuentra en su Unidad y que le permite modificar sus archivos de Drive utilizando un conjunto de métodos que se describen aquí https://developers.google.com/apps-script/reference/document/document

La línea a continuación es la sintaxis jQuery.

$(document).keydown(function(e){}

jQuery es una biblioteca de JavaScript para el desarrollo del lado del cliente. Se usa para navegar en el árbol HTML DOM de una página web. $ (documento) es la representación de jQuery del DOM. Más sobre jQuery http://jquery.com/

Debido a que Google Apps Script se ejecuta en los servidores de Google, no localmente en su máquina, no hay un árbol DOM para que pueda navegar. Está limitado a las funciones de GAS que se asignan a bits de código en los servidores de Google. Estas dos líneas de código no tienen nada que ver entre sí y no se refieren al mismo documento.

Lo mismo se aplica a los eventos que puede escuchar. Si bien GAS tiene algunas capacidades de manejo de eventos, la lista de eventos es bastante corta (ver ''Activadores simples'' y disparadores instalados '') https://developers.google.com/apps-script/guides/triggers/

ACTUALIZAR

Puede lograrlo creando su propia interfaz de usuario personalizada utilizando HtmlService. La advertencia es que parece que no hay forma de transferir el control del Documento de Google al elemento de la IU, por lo que deberá establecer el foco manualmente en la barra lateral después de cada acción.

Aquí está el ejemplo de cómo puede verse el archivo .gs en su proyecto. Trate esto como su aplicación de servidor.

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

Debajo está mi código del lado del cliente para la plantilla de la barra lateral. Usted crea la plantilla en su Editor de scripts haciendo clic en Archivo -> Nuevo -> archivo Html. Llámalo sidebar o lo que sea que elijas para var htmlOutput en el archivo .gs anterior. Si presiona ''Ctrl + Q'', la barra lateral mostrará una confirmación y llamará a la función setColor1() en su archivo .gs .

Más información sobre las funciones de GAS del lado del servidor desde el cliente https://developers.google.com/apps-script/guides/html/reference/run

Más sobre HtmlService https://developers.google.com/apps-script/guides/html/

El inconveniente obvio es que la barra lateral debe adquirir el foco primero, por lo que siempre debe hacer clic en ella después de hacer una selección.

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

¡Espero que esto ayude!

Answer 2

En lugar de utilizar la barra lateral como sugirió Anton Dementiev, es posible utilizar un cuadro de diálogo no modal . Se puede ejecutar desde la función onOpen () o desde un elemento de menú.

• Ventaja del cuadro de diálogo no modal sobre la barra lateral: el cuadro de diálogo es más pequeño y se puede mover a cualquier parte de la pantalla (haga clic en el título y arrástrelo)
• Inconveniente: es más fácil establecer el foco en la barra lateral, porque en el cuadro de diálogo no modal, debe hacer clic dentro del contenido del diálogo (que puede ser bastante pequeño) para establecer el foco.

El .html es el mismo que el que dio Anton Dementiev, pero el .gs es diferente:

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

Answer 3

Es realmente engorroso tener que hacer clic en la barra lateral / cuadro de diálogo no modal y es endrino, así que estoy haciendo con Autohotkey . Aquí hay un script .ahk ( fuente )

#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