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

Question

我有一个带有一些文本的 Google 文档，并且我创建了一个补充工具栏。我想要的是，当有人突出显示一个词时，然后使用侧边栏中的单选按钮单击一个选项，该词将以一种颜色突出显示，具体取决于选项 selected。我已经使用 HtmlService 获得了带有单选按钮的侧边栏，并且我获得了一些 Google Apps 脚本，它会突出显示这个词。我正在努力的是找到一种方法来注册单击了哪个单选按钮，然后可以使用它来决定 select 的颜色。我已经设法在 HTML 代码中使用 Javascript 触发操作，但我不能 link 使用突出显示单词的功能。我一直在尝试在按钮 selected 时设置一个变量，然后可以在 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，它突出显示了单词 if selected.

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

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

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

在 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-apps-script