# j-Paper

> Editare contenuti ricchi come un elenco di widget.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 9219a20595551f2d751a79a4c4789eefbcb6c02d5975c4052ef3754a8a43790d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Il componente modifica un documento come una serie di oggetti widget. collegare un percorso modello a quella serie, configurare il repository widget, e utilizzare autosave per scrivere le edizioni indietro al modello.

- La produzione è una semplice struttura `Object Array`:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Ristorante dei widget: https://github.com/totaljs/parts/tree/main/paper

__Configurazione__:

- `readonly {Number}` consente/disabilita la modalità readonly `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` opzionale, un elemento parentale per min-altezza (default: `null`)
- `margin {Number}` margine aggiuntiva per min-altezza (default: `0`)
- I cambiamenti di `autosave {Boolean}` vengono serializzati in base al percorso automaticamente
- `widgets {String}` un collegamento ai widget (default: Componentator CDN)
	- può contenere più indirizzi divisi dal comma `mywidget1.html,/mywidget2.html,etc..`
	- o si può tenere [Struttura del CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` un collegamento al `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __IMPORTANT__: chiama l'argomento `callback` se l'icona è stata modificata nell'elemento
- `link {String}` un collegamento al `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` per un widget
- `command {String}` un collegamento al `function(cmd)`
	- `cmd.widget {Object}`: un widget temporaneo
	- `cmd.widgets {Array}` un elenco di widget registrati
	- `cmd.remove() {Function}` rimuove il widget
	- `cmd.append(name)` sostituisce il widget temporaneo con un nuovo widget (nome del widget `name`)
- `format {String}` un collegamento al `function(toolbar)`
	- `toolbar` può essere `null`
	- `toolbar.element {jQuery element}` un elemento attuale
	- `toolbar.node {HTML element}` un elemento attuale
	- `toolbar.widget {Object}` per un widget
	- `toolbar.style {Object}` contiene uno stile attuale, ad esempio `bold: 1, link: 1`
- `upload {String}` un collegamento al `function(opt, callback)`
	- `opt.accept {String}` opzionale
	- `opt.files {FileList}` opzionale
	- `opt.multiple {Boolean}` opzionale, predefinito: `false`
	- `opt.width {Number}` opzionale
	- `opt.height {Number}` opzionale
	- Importante è: `callback` L'argomento deve essere eseguito dopo l'invio con il `files {Array}` Argomento
- `change {String}` un collegamento al `function(change)`
	- Il `change.id {String}`
	- `change.block {String}` un identificatore di blocco
	- `change.blockprev {String}` un identificatore di blocco precedente
	- `change.widget {String}` di un widget
	- Tipo di funzionamento `change.type {String}` (inserire, aggiornare, rimuovere)
- `contextmenu {String}` un collegamento al `function(widget)` quando l'utente ha premuto il pulsante del mouse destro sul widget
- `check {String}` un collegamento al `function(widget)` che decide se abilitare l'editing o meno
- `placeholder {String}` un locatore per il widget HTML predefinito (predefinita: `Press / for adding rich content`)

__Metodi__:

- `component.save(function(data, ischange) {` per risparmiare contenuti
- `component.import(url or url_array, [callback])` per l'importazione di widget aggiuntivi
- `component.notify(event, [a], [b], [c], [d])` emette eventi in ogni widget

__Buono sapere__:

Il componente crea una variabile globale chiamata `window.papercache {Object}` utilizzata da tutti i casi di `j-Paper`.

- il componente confronta il contenuto quando si cambiano i dati, in modo da poter modificare i dati in tempo reale
- Il componente assegna (in forma) la classe `paper-yourwidgetname` a ogni elemento widget
- Classi HTML riservati `readonly`, `widget`, `selected`
	- Utilizzo in linea: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` contiene un widget
	- Il metodo `widget.remove()` rimuoverà il widget

__Scontri in testo Edit__:

- `CMD + m` sottolinea il testo
- `CMD + l` crea un collegamento
- `CMD + p` aggiunge un'icona
- `CMD + b` Il coraggio
- `CMD + i` Italiano
- `CMD + u` sottolineato

__Buono sapere__:

- L'attribuzione `[data-prevent]` può prevenire l'evento cliccato nel widget

## Utilizzo

```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>
```

Servite l'indice widget su /paper/db.json e i suoi file widget dalla vostra applicazione.

La fonte: [Componenti di Total.js](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka e contribuenti. [La mia licenza](/knowledge-licenses.json).