在 Google Docs 侧边栏中选中单选按钮时，如何触发 Google Doc 中的操作？答案

【问题标题】：When a radio button is checked on the Google Docs sidebar, how can I trigger an action in a Google Doc?在 Google Docs 侧边栏中选中单选按钮时，如何触发 Google Doc 中的操作？
【发布时间】：2016-05-07 17:46:36
【问题描述】：

我有一个带有一些文本的 Google 文档，并且我创建了一个边栏。我想要的是，当有人突出显示一个单词，然后使用侧边栏中的单选按钮单击一个选项时，该单词将根据所选选项以颜色突出显示。我已经有了带有单选按钮的侧边栏，使用 HtmlService，并且我有一些 Google Apps 脚本可以突出显示这个词。我正在努力寻找一种方法来注册单击了哪个单选按钮，然后可以使用该单选按钮来决定选择哪种颜色。我已经设法在 HTML 代码中使用 Javascript 触发操作，但我无法将它与突出显示该单词的函数链接。我一直在尝试在选择按钮时设置一个变量，然后可以在 If 语句中使用它来决定要添加什么颜色。这是迄今为止我编写的 GAS 代码和 HTML。如果有人对缺少的内容有任何想法，他们将不胜感激。谢谢！

  //Function to create sidebar and get HTML from file called Index
function sidebar() {

      var htmlOutput = HtmlService.createHtmlOutputFromFile('Index')
          .setSandboxMode(HtmlService.SandboxMode.IFRAME)
          .setTitle('Writing codes');

      DocumentApp.getUi().showSidebar(htmlOutput);  

    }

下面是“Index.html”文件

  <!DOCTYPE html>
    <html>
    <head>
    <base target="_top">
    </head>
    <body>
        <p>Highlight an area and click on a code below to highlight it in the text.</p>

   <form>
   <input type="radio" name="error" id="GrammarBut"/> Grammar<br />
   <input type="radio" name="error" id="VocabBut"/> Vocabulary<br />
   <input type="radio" name="error" id="WOBut"/> Word order<br />
   <br />
<div class="block">
    <button class="blue">Add</button>
</div>
</form>

</body>
</html>

下面是highlightText函数，如果选中的话，它会突出显示单词。

function highlightText() {
  var selection = DocumentApp.getActiveDocument().getSelection();
  if (selection) {
  var elements = selection.getRangeElements();
  for (var i = 0; i < elements.length; i++) {
  var element2 = elements[i];

// Only modify elements that can be edited as text; skip images and other non-text elements.
   if (element2.getElement().editAsText) {
   var text = element2.getElement().editAsText();
   if (element2.isPartial()) {
       text.setBackgroundColor(element2.getStartOffset(), element2.getEndOffsetInclusive(), "#FFFD4C");
       } else {
       text.setBackgroundColor("#FFFD4C");       
    }
   }
  }
 }
}

【问题讨论】：

标签： google-apps-script google-docs

【解决方案1】：

添加一个触发客户端 JavaScript 函数的 onclick 事件，并引用触发的元素。然后使用您选择的颜色调用服务器端函数。

单选按钮元素：

<form>
   <input onclick="chngColor(this)" type="radio" name="error" id="GrammarBut"/> Grammar<br />
   <input onclick="chngColor(this)" type="radio" name="error" id="VocabBut"/> Vocabulary<br />
   <input onclick="chngColor(this)" type="radio" name="error" id="WOBut"/> Word order<br />
   <br />

客户端 JavaScript：

function chngColor(element)
{
  var id = element.id;
  var color;

  if(id == "GrammerBut")
    color = "the color you need";
  else if(id == "VocabBut")
    color = "next color";
  else if(id == "WOBut")
    color = "final color";

  google.script.run.highlightText(color);
}

然后只需更改服务器端函数以接收一个参数来设置颜色，或者您需要做的任何其他事情。

【讨论】：

Gerneio 非常出色！太感谢了！对于其他阅读此类似问题的人，在 HTML 文档中，我将按钮 HTML 放在上面，并将 chngColor 函数放在