2016-05-07 20 views
0

テキストを含むGoogleドキュメントがあり、サイドバーを作成しました。私が欲しいのは、誰かが単語を強調表示し、サイドバーのラジオボタンを使ってオプションをクリックすると、選択されたオプションに応じて単語が色で強調表示されるということです。 私は既にHtmlServiceを使ってラジオボタンを持ったサイドバーを手に入れました。そして、その言葉を強調するいくつかのGoogle Apps Scriptがあります。 私が苦労しているのは、クリックしたラジオボタンを登録する方法を見つけることです。このラジオボタンを使用して、選択する色を決定できます。 私はHTMLコードでJavascriptを使用してアクションをトリガーすることができましたが、単語を強調する機能とリンクすることはできません。ボタンを選択したときに変数を設定しようとしていましたが、Ifステートメントでどの色を追加するかを決定するために使用できました。 これまでに書いたGASコードとHTMLは次のとおりです。 誰かが何が欠けているかについてのアイディアがあれば、大いに感謝します。 ありがとう!以下はGoogleドキュメントのサイドバーでラジオボタンがオンになっていると、Googleドキュメントでアクションをトリガーするにはどうすればよいですか?

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

答えて

2

トリガーされた要素への参照を含むクライアントサイド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); 
} 

それからちょうどあなたがする必要がある任意の他の色、またはを設定したパラメータに取るようにサーバー側の機能を変更します。

+0

Gerneioは素晴らしい作品です!どうもありがとうございます!同様の問題でこれを読んでいる人のために、HTML文書では上記のようにボタンHTMLと、

関連する問題