ShinyEditor：Shiny应用程序中的富文本编辑器

简介

这篇文章介绍了如何在Shiny应用中实现HTML或文本编辑器。我们使用开源的TinyMCE javascript作为文本编辑器。它是最流行的文本编辑器之一，被一些著名的博客或网站使用。它允许几个自定义工具，如字体大小和颜色，子弹和编号列表，创建表格，对齐等。

在线文本编辑器的使用案例

有许多情况下，你需要在线文本编辑器。其中一些情况如下

1. 在人力资源管理工具中，你要求员工提交他们的目标，并写下成就和需要改进的地方。Bullet和Numbered list是关键的格式化方法，可以帮助员工列出他们的内容。员工也可以从MS Word中复制内容，编辑器会保留其格式。
2. 假设你正在建立一个客户反馈的网络应用。你将允许客户在应用程序中提供开放式的评论。富文本编辑器将帮助你的用户以清晰的方式描述他们的问题。
3. 你写博客，想让你的（完整或部分）内容快速地使用HTML。PS - 我在这个博客中使用了它

安装

我很高兴为此发布了名为ShinyEditor 的R包。你可以从github上安装它。它在CRAN中还没有出现。

remotes::install_github("deepanshu88/ShinyEditor")

你还需要一个来自Tiny网站的API密钥。你只需要注册，这是完全免费的，而且可以直接获得一个API。一旦完成，你会看到API密钥。你还需要提交你想要部署文本编辑器的域名。例如，如果你想让TinyMCE在listendata.com上实现，在域名栏中输入该域名，然后点击添加域名。你可以添加一个以上的域名。

演示

我在shinyapps.io上部署了应用程序。你可以在这里看到演示

Shiny中的HTML编辑器

下面是一个简单的例子，你如何使用ShinyEditor 包。请确保在这里输入你的API密钥use_editor("API-Key") 即使你不输入你的API密钥，下面的程序也会运行，但它会抛出一个错误信息，说你的API密钥不正确。

library(shiny)
library(ShinyEditor)

# UI
ui <- fluidPage(

  # Setup
  use_editor("API-Key"),
  titlePanel("HTML Generator"),

  # Text Input 1
fluidRow(
  column(
    width = 6,
    editor('textcontent'),
    br(),
    actionButton(
      "generatehtml",
      "Generate HTML Code",
      icon = icon("code"),
      class = "btn-primary"
    )),

  column(
    width = 6,
    tags$pre(textOutput("rawText"))
  )
)

)

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

  # Generate HTML
  observeEvent(input$generatehtml, {

    editorText(session, editorid = 'textcontent', outputid = 'mytext')

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

  })

}

# Run App
shinyApp(ui = ui, server = server)

自定义编辑器的选项

在editor( ) 函数中，你有名为options 的参数来定制编辑器。你可以在 tinyMCE 网站上查看允许的选项的完整列表。

library(shiny)
library(ShinyEditor)

# UI
ui <- fluidPage(

  # Setup
  use_editor("API-Key"),
  titlePanel("HTML Generator"),

  # Text Input 1
  fluidRow(
    column(
      width = 6,
      editor('textcontent', text = "Sample Text",
      options = "branding: false,
             height: 300,
             plugins: ['lists', 'table', 'link', 'image', 'code'],
             toolbar1: 'bold italic forecolor backcolor | formatselect fontselect fontsizeselect | alignleft aligncenter alignright alignjustify',
             toolbar2: 'undo redo removeformat bullist numlist table blockquote code superscript  subscript strikethrough link image'"),
      br(),
      actionButton(
        "generatehtml",
        "Generate HTML Code",
        icon = icon("code"),
        class = "btn-primary"
      )),

    column(
      width = 6,
      tags$pre(textOutput("rawText"))
    )
  )

)

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

  # Generate HTML
  observeEvent(input$generatehtml, {

    editorText(session, editorid = 'textcontent', outputid = 'mytext')

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

  })

}

# Run App
shinyApp(ui = ui, server = server)

打印实时HTML转换

假设你想显示用户所写内容的实时HTML。在下面的程序中，当用户在编辑器中输入一些文本时，实时HTML就会显示在右边的框中。

library(shiny)
library(ShinyEditor)

# UI
ui <- fluidPage(
  
  # Setup
  use_editor("API-Key"),
  titlePanel("HTML Generator"),
  
  # Text Input 1
  fluidRow(
    column(
      width = 6,
      editor('textcontent')
      ),
    
    column(
      width = 6,
      tags$pre(textOutput("rawText"))
    )
  )
  
)

# Server
server <- function(input, output, session) {
  
  # Generate HTML
  values <- reactiveValues(a = NULL)
  
  observe({
    editorText(session, editorid = 'textcontent', outputid = 'mytext')
    req(input$mytext)
    values$a <- enc2utf8(input$mytext)
  })
  
    output$rawText <- renderText({
      req(values$a)
      values$a
    })
    

}

# Run App
shinyApp(ui = ui, server = server)

更新编辑器

包允许你通过UpdateEditor( ) 功能在客户端更新编辑器。请看下面的完整例子。

 library(shiny)
 library(ShinyEditor)

 # UI
 ui <- fluidPage(

   # Setup
   use_editor("API-Key"),
   titlePanel("HTML Generator"),

   # Text Input 1
   fluidRow(
     column(
       width = 6,
       editor('textcontent'),
       br(),
       actionButton(
         "generatehtml",
         "Generate HTML Code",
         icon = icon("code"),
         class = "btn-primary"
       ), actionButton("updatedata", "Update Editor", icon = icon("edit"))),

     column(
       width = 6,
       tags$pre(textOutput("rawText"))
     )
   )

 )

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

   # Generate HTML
   observeEvent(input$generatehtml, {

    editorText(session, editorid = 'textcontent', outputid = 'mytext')

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

   })

   observeEvent(input$updatedata, {
    UpdateEditor(session,
                id = "textcontent",
                text = "<b>Sample Text</b>")

  })

 }

 # Run App
 shinyApp(ui = ui, server = server)