如何使用 JavaScript 更新闪亮的 htmlOutput 的内容

Question

闪亮的应用程序显示一个句子。

当用户选择句子的某些部分并单击 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 的情况下实现）。

Answer 1

您的代码正在运行。问题是 <markup> 标签在 HTML 中不存在。如果将 <markup> 更改为 <mark>，它将起作用。

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

如何使用 JavaScript 更新闪亮的 htmlOutput 的内容

How to update the contents of htmlOutput in shiny using JavaScript

javascript

r

shiny

shiny-reactivity