在 Shiny 中保存多个 TinyMCE 的内容

Posted 2023-03-24

【中文标题】在 Shiny 中保存多个 TinyMCE 的内容

【英文标题】：saving content of multiple TinyMCE in Shiny

【发布时间】：2021-08-29 08:52:05

【问题描述】：

我在闪亮中使用了两个 tinyMCE 实例。我想使用单个操作按钮将这两个实例的内容保存为 csv 文件。我可以使用两个操作按钮，但这违背了我的目标。 javascript 以及如何使其在 R 中工作并不是很好。我能够获取一些代码来保存第一个实例的输出。以下是一个工作示例。

library(shiny)

# Define UI for application that draws a histogram
ui <-  fluidRow(
        titlePanel("tinyMCE Shiny"),
        br(),
        column(width=6,
               tags$script(src='https://cloud.tinymce.com/stable/tinymce.min.js'),
               tags$form(method="post",
                         tags$textarea(id="textHolder1"),
                         tags$textarea(id="textHolder2")
               ),
               br(),
               actionButton("fetch", "Get Results!", icon=icon("lightbulb-o"),class="btn-primary",
                            onclick = "Shiny.onInputChange('typedText', tinyMCE.get('textHolder1').getContent());"),
               tags$script("
                           tinymce.init(
                           selector:'#textHolder1',
                           theme: 'modern',
                           height: 500,
                           plugins: ['advlist autolink link image lists charmap preview hr table','wordcount',],
                           menubar: true,
                           toolbar: 'undo redo | bold italic | bullist | link | image ',
                           );"),
               tags$script("
                           tinymce.init(
                           selector:'#textHolder2',
                           theme: 'modern',
                           height: 500,
                           plugins: ['advlist autolink link image lists charmap preview hr table','wordcount',],
                           menubar: true,
                           toolbar: 'undo redo | bold italic | bullist | link | image ',
                           );")
  ),
  column(width=6,
         tags$style(html('pre height:240px;')),
         tags$label(`for`="rawText", "Raw String"),
         hr(),
         tags$pre(textOutput("rawText")),
         br(),
         tags$label(`for`="htmlText", "HTML Version"),
         hr(),
         tags$pre(htmlOutput("htmlText"))
  )
    )

# Define server logic required to draw a histogram
server <- function(input, output) 
   
    output$htmlText <- renderUI(
        req(input$typedText)
        HTML(enc2utf8(input$typedText))
    )
    
    output$rawText <- renderText(
        req(input$typedText)
        enc2utf8(input$typedText)
    )
    
    observeEvent(input$fetch,
        j <- data.frame("t"= HTML(enc2utf8(input$typedText)))
        write.csv(j,"test.csv")
    )
    


# Run the application 
shinyApp(ui = ui, server = server)

【参考方案1】：

您可以连接来自onclick 中的两个文本的输入-

actionButton("fetch", "Get Results!", icon=icon("lightbulb-o"),class="btn-primary",
                      onclick = "Shiny.onInputChange('typedText', tinyMCE.get('textHolder1').getContent() + tinyMCE.get('textHolder2').getContent());")

完整的应用代码 -

ui <-  fluidRow(
  titlePanel("tinyMCE Shiny"),
  br(),
  column(width=6,
         tags$script(src='https://cloud.tinymce.com/stable/tinymce.min.js'),
         tags$form(method="post",
                   tags$textarea(id="textHolder1"),
                   tags$textarea(id="textHolder2")
         ),
         br(),
         actionButton("fetch", "Get Results!", icon=icon("lightbulb-o"),class="btn-primary",
                      onclick = "Shiny.onInputChange('typedText', tinyMCE.get('textHolder1').getContent() + tinyMCE.get('textHolder2').getContent());"),
         tags$script("
                           tinymce.init(
                           selector:'#textHolder1',
                           theme: 'modern',
                           height: 500,
                           plugins: ['advlist autolink link image lists charmap preview hr table','wordcount',],
                           menubar: true,
                           toolbar: 'undo redo | bold italic | bullist | link | image ',
                           );"),
         tags$script("
                           tinymce.init(
                           selector:'#textHolder2',
                           theme: 'modern',
                           height: 500,
                           plugins: ['advlist autolink link image lists charmap preview hr table','wordcount',],
                           menubar: true,
                           toolbar: 'undo redo | bold italic | bullist | link | image ',
                           );")
  ),
  column(width=6,
         tags$style(HTML('pre height:240px;')),
         tags$label(`for`="rawText", "Raw String"),
         hr(),
         tags$pre(textOutput("rawText")),
         br(),
         tags$label(`for`="htmlText", "HTML Version"),
         hr(),
         tags$pre(htmlOutput("htmlText"))
  )
)

# Define server logic required to draw a histogram
server <- function(input, output) 
  
  output$htmlText <- renderUI(
    req(input$typedText)
    HTML(enc2utf8(input$typedText))
  )
  
  output$rawText <- renderText(
    req(input$typedText)
    enc2utf8(input$typedText)
  )
  
  observeEvent(input$fetch,
    j <- data.frame(t = HTML(enc2utf8(input$typedText)))
    write.csv(j,"test.csv")
  )
  


# Run the application 
shinyApp(ui = ui, server = server)

【讨论】：

谢谢，但是这个解决方案并不能解决我的问题。我的问题应该更清楚。如果您注意到我使用 textholder1 和 textholder2 识别了 2 个 TinyMCE 实例。我只能使用操作按钮保存 textholder1 的输出。我想使用单个操作按钮保存 textholder1 和 textholder2 的输出。

@AtmajitsinhGohil 知道了，你能试试更新的答案吗？

这是完美的。谢谢...这是一个非常好的解决方案。我对 javascript 真的很陌生。