README

The shinyEditor package enables Shiny application developers to use the Ace text editor and monaco editor in their applications. All current modes (languages) and themes are supported in this package. The mode, theme, and current text can be defined when the element is initialized in ui.R or afterwards using the shinyjs::runjs() function. The editor registers itself as a reactive Shiny input, so the current value of the editor can easily be pulled from server.R using shinyEditor::getAceValue(outputId).

-> Text Comparison

-> Spell Checking (Enable in Ace Editor)

-> Extra SAS Code Highlight Mode (Enable in Ace Editor)

Installing

install.packages("shinyEditor") # Not available

If you prefer, you can also install this package straight from GitHub via devtools::install_github():

devtools::install_github("zearoby/shinyEditor")

Getting Started

01-ace_editor

shiny::runApp(system.file("examples/01-ace_editor", package="shinyEditor"))

02-ace_diff

shiny::runApp(system.file("examples/02-ace_diff", package="shinyEditor"))

03-ace_diff

shiny::runApp(system.file("examples/03-ace_diff", package="shinyEditor"))

04-monaco_editor

shiny::runApp(system.file("examples/04-monaco_editor", package="shinyEditor"))

05-monaco_diff

shiny::runApp(system.file("examples/05-monaco_diff", package="shinyEditor"))

Simple Examples

1. Ace Editor

library(shiny)
library(shinyEditor)

ui <- shiny::fluidPage(
   style = "padding: 0px;",
   shiny::div(
      style = "height: 100vh; display: flex; flex-direction: column;",
      shinyEditor::aceEditorOutput("editor", height = "100%")
   )
)

server <- function(input, output, session) {
   output$editor <- shinyEditor::renderAceEditor({
      shinyEditor::aceEditor(
         value = "# This is a comment",
         mode = "ace/mode/r",
         tabSize = 3,
         printMarginColumn = 80
      )
   })
}

shinyApp(ui, server)

2. Ace Diff Editor

library(shiny)
library(shinyEditor)

ui <- shiny::fluidPage(
   style = "padding: 0px;",
   shiny::div(
      style = "height: 100vh; display: flex; flex-direction: column;",
      shinyEditor::aceDiffEditorOutput("editor", height = "100%")
   )
)

server <- function(input, output, session) {
   output$editor <- shinyEditor::renderAceDiffEditor({
      shinyEditor::aceDiffEditor(
         valueA = "123333333",
         valueB = "321333333"
      )
   })
}

shinyApp(ui, server)

3. Create Diff View for Exist Editors

library(shiny)
library(shinyjs)
library(shinyEditor)
library(htmltools)

ui <- shiny::fluidPage(
   style = "padding: 0; height: 100vh;",
   shinyjs::useShinyjs(),
   htmltools::div(
      style = "display: flex; flex-direction: column; height: 100%; width: 100%;",
      htmltools::div(
         shiny::actionButton("create", "Create Diff View"),
         shiny::actionButton("remove", "Remove Diff View")
      ),
      htmltools::div(
         style = "display: flex; flex: 1;",
         shinyEditor::aceEditorOutput("editor1", height = "100%"),
         shinyEditor::aceEditorOutput("editor2", height = "100%")
      )
   )
)

server <- function(input, output, session) {
   output1_id <- "editor1"
   output2_id <- "editor2"
   
   output[[output1_id]] <- shinyEditor::renderAceEditor({
      shinyEditor::aceEditor(
         value = readLines('../../../R/aceEditor.R'),
         mode = "ace/mode/r"
      )
   })
   
   output[[output2_id]] <- shinyEditor::renderAceEditor({
      shinyEditor::aceEditor(
         value = readLines('../../../R/aceDiffEditor.R'),
         mode = "ace/mode/r"
      )
   })
   
   shiny::observeEvent(input$create, {
      shinyEditor::createAceDiffView(editorAId = output1_id, editorBId = output2_id)
   })
   
   shiny::observeEvent(input$remove, {
      shinyEditor::removeAceDiffView(outputId = output1_id)
   })
}

shinyApp(ui, server)

4. Monaco Editor

library(shiny)
library(shinyEditor)

ui <- shiny::fluidPage(
   style = "padding: 0px;",
   shiny::div(
      style = "height: 100vh; display: flex; flex-direction: column;",
      shinyEditor::monacoEditorOutput("editor", height = "100%")
   )
)

server <- function(input, output, session) {
   output$editor <- shinyEditor::renderMonacoEditor({
      shinyEditor::monacoEditor(
         value = 'readLines("./inst/examples/01-editor/ui.R")'
      )
   })
}

shinyApp(ui, server)

Notice

value <- "new text"
shinyjs::runjs(
   paste0(
      "const editor = ace.edit('", session$ns(outputId), "');",
      "editor.setValue(", jsonlite::toJSON(value, auto_unbox = TRUE), ");"
   )
)

visible <- FALSE
shinyjs::runjs(
   paste0(
      "const editor = ace.edit('", session$ns(outputId), "');",
      'editor.setOption("showLineNumbers", ', tolower(visible), ');',
      "editor.renderer.setShowGutter(", tolower(visible), ");"
   )
)

Thanks for below projects

Need a high-speed mirror for your open-source project?
Contact our mirror admin team at info@clientvps.com.

This archive is provided as a free public service to the community.
Proudly supported by infrastructure from VPSPulse , RxServers , BuyNumber , UnitVPS , OffshoreName and secure payment technology by ArionPay.

Welcome to ClientVPS Mirrors

shinyEditor