需要将服务器生成的动态文本显示到 TextArea 中的 UI 上（语法高亮显示）

Question

我正在尝试将随机生成的字符串推送到 UI 上的文本区域。 HTML/Shiny/JS 的新手，但我了解一些基础知识。

我的最终目标是使用 CodeMirror (Whole download) 或 ShinyAce 编辑器类将语法突出显示添加到文本区域，但我无法将字符串从服务器输出到文本区域。我希望在 textStringToDisplay 中推送某个 R 代码并需要语法高亮显示。

请将以下文件放入app.R的www文件夹中：

codemirror.css
cobalt.css
codemirror.js（我没找到 GitHub上的这个文件，请使用上面的下载link，解压并查看 lib 文件夹）
r.js

如果您需要更多信息或者我是否应该改写其中的任何部分，请告诉我。提前致谢。

library(shiny)

if (interactive()) {

  ui <- shinyUI(
    fluidPage(
      tags$head(tags$title("Title"),
                tags$link(rel = "stylesheet", href = "codemirror.css"),
                tags$link(rel = "stylesheet", href = "cobalt.css"),
                tags$script(src = "codemirror.js"),
                tags$script(src = "r.js")
      ),
      tags$textarea(id="textBox", name = "Feedback", textOutput(outputId = "textStringToDisplay")),
      tags$script(
        'var editorR = CodeMirror.fromTextArea(textBox, {
        mode: "r",
        lineNumbers: true,
        smartindent: true
});
        editorR.setOption("theme", "cobalt");
        editorR.setSize("50%","100%");')))

  server <- function(input, output){
    output$textStringToDisplay <- renderText(paste0(sample(letters,15),collapse = ""))
  }

  shinyApp(ui = ui, server = server)
}

Answer 1

您好，我已经注释掉了您的 css 和 java 脚本，因为我不知道问题出在哪里。你的问题和这个问题一样

这是您的代码的工作版本

library(shiny)

if (interactive()) {

  ui <- shinyUI(
    fluidPage(
      tags$head(tags$title("Title")
                # tags$link(rel = "stylesheet", href = "codemirror.css"),
                # tags$link(rel = "stylesheet", href = "cobalt.css"),
                # tags$script(src = "codemirror.js"),
                # tags$script(src = "r.js")
      ),
      uiOutput(outputId = "textStringToDisplay")
#       tags$script(
#         'var editorR = CodeMirror.fromTextArea(textBox, {
#         mode: "r",
#         lineNumbers: true,
#         smartindent: true
# });
#         editorR.setOption("theme", "cobalt");
#         editorR.setSize("50%","100%");')
))

  server <- function(input, output){
    output$textStringToDisplay <- renderUI(
      tags$textarea(id="textBox", name = "Feedback", paste0(sample(letters,15),collapse = "")))
  }

  shinyApp(ui = ui, server = server)
}

Answer 2

这是我的最终实现。感谢@Bertil 关于 renderUI 的建议。必须使用 shinyjs 包和 runjs 函数来获取 JS 脚本运行。此外，它仅在与事件（如单击按钮）配对时才有效。不知道如何在应用程序加载时触发它（稍后 post 另一个关于此的问题）。

library(shiny) 
library(shinyjs)

if (interactive()) {
     ui <- shinyUI(
    fluidPage(
      useShinyjs(),
      tags$head(tags$title("Title"),
                tags$link(rel = "stylesheet", href = "codemirror.css"),
                tags$link(rel = "stylesheet", href = "cobalt.css"),
                tags$script(src = "codemirror.js"),
                tags$script(src = "r.js")
      ),
      actionButton("btn1","Click to see code"),
      uiOutput(outputId = "textStringToDisplay")))
     server <- function(input, output){
    output$textStringToDisplay <- renderUI(
      tags$textarea(id="textBox", name = "Feedback", paste0(sample(letters,15),collapse = "")))

    ButtonPressCounter <- 0

    observeEvent(input$btn1,
                 {
                   ButtonPressCounter <<- ButtonPressCounter + 1 # Need it to happen only once
                   if(ButtonPressCounter <= 1){
                     shinyjs::runjs(
                       'var editorR = CodeMirror.fromTextArea(textBox, {
                       mode: "r",
                       lineNumbers: true,
                       smartindent: true});
                       editorR.setOption("theme", "cobalt");
                       editorR.setSize("100%","100%");')
                   }
                 })
       }
     shinyApp(ui = ui, server = server) }

需要将服务器生成的动态文本显示到 TextArea 中的 UI 上（语法高亮显示）

Need to display dynamic text generated from server onto UI within a TextArea(with syntax highlighting)

html

r

codemirror

shiny