在shiny中调用htmlwidget(jsoneditor)上的JavaScript方法,可以通过以下步骤实现:
htmlwidgets::useWidget()
函数来加载。div
元素,用于容纳jsoneditor的实例。可以使用htmltools::div()
函数创建。renderUI()
函数来渲染jsoneditor的实例。在renderUI()
函数中,可以使用htmlwidgets::createWidget()
函数来创建jsoneditor的实例,并将其绑定到之前创建的div
元素上。observeEvent()
函数来监听jsoneditor的事件。可以使用htmlwidgets::onRender()
函数来注册事件监听器,并在事件发生时执行相应的操作。下面是一个示例代码,演示了如何在shiny中调用htmlwidget(jsoneditor)上的JavaScript方法:
library(shiny)
library(jsoneditor)
ui <- fluidPage(
tags$head(
# 加载jsoneditor的htmlwidget库
htmlwidgets::HTML(paste0('<script src="', htmlwidgets:::getDependencyPath("jsoneditor", "jsoneditor.min.js"), '"></script>'))
),
fluidRow(
column(width = 6,
# 创建一个div元素,用于容纳jsoneditor的实例
htmltools::div(id = "jsoneditor")
)
)
)
server <- function(input, output, session) {
output$jsoneditor <- renderUI({
# 渲染jsoneditor的实例
htmlwidgets::createWidget("jsoneditor", list(), width = "100%", height = "400px")
})
observeEvent(input$jsoneditor, {
# 监听jsoneditor的事件
htmlwidgets::onRender(input$jsoneditor, '
function(el, x) {
// 在jsoneditor的实例上调用JavaScript方法
var json = JSON.parse(\'{"name": "John", "age": 30}\');
x.jsoneditor.set(json);
}
')
})
}
shinyApp(ui, server)
在上述示例代码中,我们首先加载了jsoneditor的htmlwidget库。然后,在UI部分创建了一个div
元素,用于容纳jsoneditor的实例。在server部分,使用renderUI()
函数渲染了jsoneditor的实例,并将其绑定到之前创建的div
元素上。同时,使用observeEvent()
函数监听了jsoneditor的事件,并在事件发生时调用了JavaScript方法。
领取专属 10元无门槛券
手把手带您无忧上云