web-dev-qa-db-fra.com

Comment créer Texarea comme entrée dans une webApp brillante dans R?

J'essaie de créer des webapp simples où je souhaite prendre une entrée multiligne à partir de l'utilisateur à l'aide de HTML TextArea Control. Y a-t-il une manière de créer un tel contrôle d'entrée en brillant?

Page d'aide de TextInput ne montre pas beaucoup d'options

textInput {shiny}   R Documentation
Create a text input control

Description

Create an input control for entry of unstructured text values

Usage

  textInput(inputId, label, value = "")
Arguments

inputId 
Input variable to assign the control's value to

label   
Display label for the control

value   
Initial value

Value

A text input control that can be added to a UI definition.

Examples

textInput("caption", "Caption:", "Data Summary")
rtextareatextinputshiny
31
Chinmay Patil

Vous pouvez ajouter une textarea à l'aide de tags et il doit être ramassé automatiquement par Shiny:

tags$textarea(id="foo", rows=3, cols=40, "Default value")

Ou si vous êtes plus à l'aise avec HTML droit, vous pouvez aussi faire

HTML('<textarea id="foo" rows="3" cols="40">Default value</textarea>')

Dans tous les cas, input$foo devrait refléter la valeur de Textarea.

40
Joe Cheng

Pour le bénéfice des autres, je publierai comment j'ai résolu le problème en utilisant un contrôle de l'interface utilisateur personnalisé suivant le tutoriel brillant

Premièrement, j'ai créé le fichier textarea.js comme suit

$(document).on("click", "textarea.inputTextarea", function(evt) {

  // evt.target is the button that was clicked
  var el = $(evt.target);

  // Raise an event to signal that the value changed
  el.trigger("change");
});

var inputTextareaBinding = new Shiny.InputBinding();
$.extend(inputTextareaBinding, {
  find: function(scope) {
    return $(scope).find(".inputTextarea");
  },
  getValue: function(el) {
    return $(el).text();
  },
  setValue: function(el, value) {
    $(el).text(value);
  },
  subscribe: function(el, callback) {
    $(el).on("change.inputTextareaBinding", function(e) {
      callback();
    });
  },
  unsubscribe: function(el) {
    $(el).off(".inputTextareaBinding");
  }
});

Shiny.inputBindings.register(inputTextareaBinding);

Ensuite, j'ai ajouté la fonction suivante dans UI.R de Shiny WebApp avant que Shinyui () est appelée

inputTextarea <- function(inputId, value="", nrows, ncols) {
    tagList(
        singleton(tags$head(tags$script(src = "textarea.js"))),
        tags$textarea(id = inputId,
                    class = "inputtextarea",
                    rows = nrows,
                    cols = ncols,
                    as.character(value))
    )
}

Ensuite, j'ai utilisé la fonction définie ci-dessus pour créer l'élément de contrôle Texarea souhaité dans UI.R.

shinyUI(pageWithSidebar(

  # Application title
  headerPanel("Test Header Panel"),

  sidebarPanel(),

  mainPanel(
        inputTextarea('exampleTextarea', '',20,35 )
  )
))
26
Chinmay Patil

Peut-être ou peut ne pas être pertinent ici, mais j'ai fait le package shinyace pour conclure et exposer l'éditeur de texte ACE en brillant. ACE est principalement utilisé pour l'édition de code (complète avec la syntaxe en surbrillance pour une variété de langues), mais fournit une interface de type texte pour écrire la composition de texte/code multi-lignes.

Vous pouvez Découvrez l'exemple pour voir si cela pourrait être ce que vous recherchez. (Essayez différents "modes" pour la surbrillance de la syntaxe et les thèmes des combinaisons de couleurs.)

15
Jeff Allen

De la version .14 Shiny a une implémentation de textAreaInput .

5
alko989

S'appuyant sur la réponse de Joe ( https://stackoverflow.com/a/14452837/5776618 ), vous pouvez également nier des balises dans votre propre fonction pour obtenir la même sortie que l'entrée intégrée brillante standard. les fonctions.

textareaInput <- function(id, label, value, rows=20, cols=35, class="form-control"){
  tags$div(
    class="form-group shiny-input-container",
    tags$label('for'=id,label),
    tags$textarea(id=id,class=class,rows=rows,cols=cols,value))
  }

C'est un moyen d'éviter d'écrire le code JS (si vous voulez) tout en restant ...

  • avoir une fonction qui appelle de la même manière que les entrées brillantes intégrées sont appelées, et
  • comprend le style CSS DIV, l'étiquette et la commande de forme de Bootstrap (de sorte qu'il ressemble à des commandes d'entrée brillantes intégrées)

L'utilisation de la fonction est la même que si vous utilisez l'intégré ou si vous avez construit une interface utilisateur personnalisée.

textareaInput("textareaID","Text Area Label", "Insert text here...", rows = 20, cols = 35)
3
Steve Ladavich