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

Question

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

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

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

1. codemirror.css
2. cobalt.css
3. codemirror.js（我找不到 此文件在 GitHub 上，请使用上面的下载链接，解压并 查看 lib 文件夹）
4. 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 脚本，因为我不知道问题出在哪里。你的问题和这个问题一样

How to create a variable hyperlink in an R Shiny App

这是您的代码的工作版本

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 脚本。此外，它仅在与事件配对时才有效（例如单击按钮）。不知道如何在应用加载时触发它（稍后将发布另一个关于此的问题）。

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