r - 在 Shiny 模态中添加 tinyMCE 编辑器

Question

我想在 Shiny 应用程序中创建一个 HTML 编辑器，使用 shinyMCE包裹。

这在下面的示例中效果很好。

library(shiny)
library(shinyMCE)
library(shinyjs)
library(shinyWidgets)
library(shinydashboard)

ui <- dashboardPage(
  useShinyjs(),
  header = dashboardHeader(disable = T),
  sidebar = dashboardSidebar(disable = T),
  body = dashboardBody(
    tags$script(src = "http://cdn.tinymce.com/4/tinymce.min.js",
                referrerpolicy = "origin"),

    tinyMCE("editor", "The content"),
    actionButton("ok", "OK")
    ))

server <- function(input, output, session)
{
  observeEvent(
    input$ok,
    {
    print(input$editor)
    }
  )

  observeEvent(
    input$open,
    {
      showModal(myModal())
    })
}

shinyApp(ui, server = server)

确实，如果您按 OK，则编辑器的内容将打印在 R 控制台中。

现在，我想将编辑器置于模式中。如果我执行以下操作，将出现编辑器，但如果我按 OK，则内容不会更新。也就是说，R 控制台始终显示“内容”，与 textarea 中写入的内容无关。

library(shiny)
library(shinyMCE)
library(shinyjs)
library(shinyWidgets)
library(shinydashboard)

ui <- dashboardPage(
  useShinyjs(),
  header = dashboardHeader(disable = T),
  sidebar = dashboardSidebar(disable = T),
  body = dashboardBody(
    tags$script(src = "http://cdn.tinymce.com/4/tinymce.min.js",
                referrerpolicy = "origin"),

    flowLayout (
      actionButton("open", "Open")
      )))

myModal <- function()
  {
  modalDialog(size = "l",
              title = "A modal dialog",
              tinyMCE("tinyTxt", "the content"),
              actionButton("ok", "OK"),
              easyClose = T)
  }

server <- function(input, output, session)
  {
  observeEvent(
    input$ok,
      {
      print(input$tinyTxt)
      }
    )

observeEvent(
    input$open,
    {
    showModal(myModal())
    })
  }

shinyApp(ui, server = server)

在 JS 控制台中，我得到

Uncaught TypeError: Cannot read property 'getContent' of null
    at exports.InputBinding.getValue (<anonymous>:9:41)
    at c (init_shiny.js:117)
    at init_shiny.js:163
    at eN.<anonymous> (<anonymous>:16:18)
    at mp.c.fire (tinymce.min.js:2)
    at eN.fire (tinymce.min.js:2)
    at eN.<anonymous> (tinymce.min.js:2)
    at mp.c.fire (tinymce.min.js:2)
    at eN.fire (tinymce.min.js:2)
    at Rp (tinymce.min.js:2)

知道如何解决这个问题吗？

编辑:进一步观察。在第一个(工作)示例中 tinyMCE.editors 包含一个编辑器实例，而在第二个示例中它是空的(尽管编辑器确实显示了!)。

Answer 1

我设法解决了这个问题，通过手动创建 TinyMCE 编辑器(它解决了编辑器没有出现在 tinymce.editors 中的问题)，然后使用一些自定义 JS 来检索值。
这对我来说似乎有点hacky，但它有效......
这是一个例子

library(shiny)
library(shinyjs)
library(shinyWidgets)
library(shinydashboard)

ui <- dashboardPage(
  useShinyjs(),
  header = dashboardHeader(disable = T),
  sidebar = dashboardSidebar(disable = T),
  body = dashboardBody(
    singleton(tags$head(tags$script(src = "http://cdn.tinymce.com/4/tinymce.min.js",
                referrerpolicy = "origin"))),

    # Register a custom message handler that gets the content of the editor
    # and forces update of the textarea
    singleton(tags$head(tags$script("Shiny.addCustomMessageHandler('getTxt', 
        function(message) {
          var content = tinyMCE.get('tinyTxt').getContent();
          Shiny.onInputChange('tinyTxt', content);
          })"))),

    flowLayout (
      actionButton("open", "Open"),
      htmlOutput("content")
      )))

myModal <- function()
  {
  modalDialog(size = "l",
              title = "A modal dialog",
              textAreaInput("tinyTxt", "the content"),
              actionButton("ok", "OK"),
              easyClose = T)
  }

server <- function(input, output, session)
  {
  observeEvent(
    input$ok,
      {
      # Retrieve the content of the editor
      session$sendCustomMessage("getTxt", "")
      removeModal()
      })

  output$content <- renderText(       
    input$tinyTxt
    )


  observeEvent(
    input$open,
    {
    showModal(myModal())

    # Create the tinyMCE editor
    runjs("var ed = new tinymce.Editor('tinyTxt', {
        selector: 'tinyTxt',
        theme: 'modern'}, 
        tinymce.EditorManager);
        ed.render();")
    })
  }

shinyApp(ui, server = server)