2017-01-06 7 views
0

光るアプリが文を表示します。JavaScriptを使用してshinyのhtmlOutputの内容を更新する方法

ユーザーが文章の一部を選択してMarkボタンをクリックしてマークアップを追加すると、アクションを反映するように文章を更新する必要があります。

例:
サンプル入力:
所望の出力のための文:デモ
選択の例文サンプル<markup> sentence for </markup>デモ

後は、光沢のあるアプリのコードと、関連するJavaScriptコードです:

library(shiny) 
ui <- fluidPage(
    tags$head(tags$script(src="addMarkup.js")), 
    titlePanel("Mark text selection"), 
    mainPanel(htmlOutput("content"), 
     actionButton("Mark", "Mark", onclick="addMarkup()") 
    ) 
) 

server <- function(input, output) { 
    sentence <- "A sample sentence for demo" 
    output$content <- renderText(sentence) 
} 

shinyApp(ui = ui, server = server) 

addMarkup.js

function addMarkup(){ 
    var sent=""; 
    sent= document.getElementById("content").innerHTML; 
    var selection=""; 
    if(window.getSelection){ 
    selection = window.getSelection().toString(); 
    } 
    else if(document.selection && document.selection.type != "Control"){ 
    selection = document.selection.createRange().text; 
    } 
    marked = "<markup>".concat(selection).concat("</markup>"); 
    result = sent.replace(selection, marked); 
    alert(result); 
    document.getElementById("content").innerHTML = result; 
} 

問題:alert(result)が所望の出力を示していたが、次の行がcontentを更新しません。

どうすればこの機能を実現できますか?

純粋な光沢のあるソリューションが存在するかどうかをご提案ください(JavaScriptを使用せずにどうすれば達成できますか)。

答えて

0

コードが機能しています。問題は、<markup>タグがHTMLに存在しないことです。 <markup><mark>に変更すると正常に動作します。

marked = "<mark>".concat(selection).concat("</mark>"); 

enter image description here

関連する問題