# j-Paper

> Réduire un contenu riche comme une liste de widgets.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 1ec23479c2d7058f53016203130d6b9445061972dd55efdfd704abac1855800b
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Le composant édite un document comme une série d'objets de widget.Lier une voie de modèle à cette ligne, configurer le repository de widgets, et utiliser autosave pour écrire des éditions en arrière au modèle.

- La production est une structure simple de `Object Array` :
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Réservatoire des widgets : https://github.com/totaljs/parts/tree/main/paper

__Configuration__ :

- `readonly {Number}` permet/disable le mode readonly `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` optionnel, un élément parent pour min-high (defaut: `null`)
- `margin {Number}` marge supplémentaire pour min-height (defaut: `0`)
- `autosave {Boolean}` Les changements sont sérialisés automatiquement selon la voie.
- `widgets {String}` un lien vers les widgets (defaut: Componentator CDN)
	- Il peut contenir plusieurs adresses divisées par le comma `mywidget1.html,/mywidget2.html,etc..`
	- Ou vous pouvez garder [La structure du CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` un lien vers le `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __ IMPORTANT__: appelez l'argument `callback` si l'icône a été modifiée dans l'élément
- `link {String}` un lien vers le `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` : une instance de widget
- `command {String}` un lien vers le `function(cmd)`
	- `cmd.widget {Object}` : une instance de widget temporaire
	- `cmd.widgets {Array}` une liste des widgets enregistrés
	- `cmd.remove() {Function}` supprime le widget
	- `cmd.append(name)` remplace le widget temporaire actuel avec un nouveau widget (nom du widget `name`)
- `format {String}` un lien vers le `function(toolbar)`
	- `toolbar` Peut être `null`
	- `toolbar.element {jQuery element}` Un élément actuel
	- `toolbar.node {HTML element}` Un élément actuel
	- `toolbar.widget {Object}` : une instance de widget
	- `toolbar.style {Object}` contient un style actuel, par exemple `bold: 1, link: 1`
- `upload {String}` un lien vers le `function(opt, callback)`
	- `opt.accept {String}` Optionnel
	- `opt.files {FileList}` Optionnel
	- `opt.multiple {Boolean}` optionnel, défaut : `false`
	- `opt.width {Number}` Optionnel
	- `opt.height {Number}` Optionnel
	- __ IMPORTANT__: L'argument `callback` doit être exécuté après avoir été téléchargé avec l'argumentaire `files {Array}`
- `change {String}` un lien vers le `function(change)`
	- `change.id {String}` Identification
	- `change.block {String}` : un identifiant de bloc
	- `change.blockprev {String}` : un identifiant de bloc précédent
	- `change.widget {String}` : un widget id
	- Type de fonctionnement `change.type {String}` (insérer, mettre à jour, supprimer)
- `contextmenu {String}` un lien vers le `function(widget)` lorsque l'utilisateur a appuyé sur le bouton droit du widget
- `check {String}` est un lien vers le `function(widget)` qui décide si vous pouvez ou non éditer
- `placeholder {String}` un locataire pour le widget HTML par défaut (par défauts: `Press / for adding rich content`)

__Méthodes__ :

- `component.save(function(data, ischange) {` pour le contenu économisé
- `component.import(url or url_array, [callback])` pour l'importation de widgets supplémentaires
- `component.notify(event, [a], [b], [c], [d])` émet un événement dans chaque widget

__Bon à savoir__ :

Le composant crée une variable mondiale appelée `window.papercache {Object}` utilisée par toutes les instances de `j-Paper`.

- le composant comparera le contenu lorsque vous modifiez les données, afin que vous puissiez changer les données en temps réel
- le composant attribue (dans la forme) la classe `paper-yourwidgetname` à chaque élément de widget
- Classes HTML réservées `readonly`, `widget`, `selected`
	- Utilisation : `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` contient un widget
	- La méthode `widget.remove()` supprime le widget

__Résumé de texte Edit__:

- Le `CMD + m` met en valeur le texte
- Le `CMD + l` crée un lien
- `CMD + p` : une icône
- `CMD + b` Courageux
- `CMD + i` Italie
- `CMD + u` sous-line

__Bon à savoir__ :

- L'attribut `[data-prevent]` peut empêcher l'événement de clic dans le widget

## Utilisation

```html
<ui-component name="paper" path="form.widgets"
  config="autosave:true;widgets:/paper/db.json"></ui-component>
<script>
  SET('form.widgets', []);
  function saveDocument() {
    SETTER('paper/save', function(widgets) {
      console.log(widgets);
    });
  }
</script>
```

Servez l'indice widget sur /paper/db.json et ses fichiers widget de votre application.

Source : [Composants Total.js](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper). Copyright Peter Širka et contributeurs. [Licence MIT](/knowledge-licenses.json).