How do I fill a tinyMCE textarea in Shiny?

Question

I'm trying to fill the textarea in this tinyMCE example from within R.

It looks like I should be writing to output$textHolder

But my statement in the observe() function isn't doing it.

I'm using the example from the tinymce site.

I can't find much support on this one.

Here is my server code:

shinyServer(function(input, output, session) {


    observe({
      print ("observe")
      output$textHolder = renderText("XXX")

    })

  output$htmlText <- renderUI({
    req(input$typedText)
    HTML(enc2utf8(input$typedText))
  })

  output$rawText <- renderText({
    req(input$typedText)
    enc2utf8(input$typedText)
  })
})

And here is my UI code:

library(shiny)
library(shinyjs)

shinyUI(
  fluidPage(
    tags$head(
      useShinyjs(),
      tags$script(src='https://cdn.tinymce.com/4/tinymce.min.js')
    ),

    fluidRow(
      titlePanel("tinyMCE Shiny"),
      br(),
      column(width=6,
             tags$form(method="post",
                       tags$textarea(id="textHolder")
             ),
             br(),
             actionButton("fetch", "Get Results!", icon=icon("lightbulb-o"),class="btn-primary",
                          onclick = "Shiny.onInputChange('typedText', tinyMCE.get('textHolder').getContent());"),
             tags$script("tinymce.init({
                         selector:'#textHolder',
                         theme: 'modern',
                         height: 200,
                         plugins: ['advlist autolink link image lists charmap preview hr','wordcount',],
                         menubar: true,
                         toolbar: 'undo redo | bold italic | bullist | link',
                         });")
  ),
  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"))
  )
      )
  )
)

Answer 1

You could consider using the shinyMCE package: https://github.com/mul118/shinyMCE. (Use e.g. devtools::install_github("mul118/shinyMCE") to install).

On ui side you would use:

tinyMCE('editor1', 'Click to edit text')

and on server side you can access the html code via input$editor1.

Below I integrated the code in your app.

Full example would read:

library(shiny)
library(shinyMCE)

server <- function(input, output, session) { 

  output$htmlText <- renderUI({
    req(input$editor1)
    HTML(enc2utf8(input$editor1))
  })

  output$rawText <- renderText({
    req(input$editor1)
    enc2utf8(input$editor1)
  })
}

ui <- shinyUI(
  fluidPage(
    fluidRow(
      titlePanel("tinyMCE Shiny"),
      br(),
      column(width = 6,
             tinyMCE('editor1', 'Click to edit text'),
             br(),
             actionButton("fetch", "Get Results!", icon=icon("lightbulb-o"),class="btn-primary",
                          onclick = "Shiny.onInputChange('typedText', tinyMCE.get('textHolder').getContent());")
  ),
  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"))
  )
      )
  )
)


shinyApp(ui, server)