# j-Paper

> Editați conținutul bogat ca o listă de widgets.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: ro
Content-SHA256: 0f5e0a087b46f24defa7e87a2a482ae48ce352db50f5bfd66c6d13d32d6d54a3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Componentul editează un document ca o serie de obiecte widget. legând o cale de model la acea linie, configurați repository-ul widget și utilizați autosave pentru a scrie editări înapoi la model.

- Produsul este o structură simplă `Object Array`:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Cuvânt cheie: https://github.com/totaljs/parts/tree/main/paper

__Configurarea__:

- `readonly {Number}` permite/disabilizează modul readonly `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` opțional, un element parental pentru min-înălțime (default: `null`)
- `margin {Number}` marjă suplimentară pentru min-înălțime (default: `0`)
- Schimbările `autosave {Boolean}` sunt serializate în funcție de cale automată
- `widgets {String}` un link la widget-urile (default: Componentator CDN)
	- poate conține mai multe adrese împărțite de comma `mywidget1.html,/mywidget2.html,etc..`
	- sau puteţi menţine [Structura CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` este un link la `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __IMPORTANT__: apelați argumentul `callback` dacă icoana a fost schimbată în element
- `link {String}` este un link la `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` - o instanta de widget
- `command {String}` este un link la `function(cmd)`
	- `cmd.widget {Object}` este o instanta temporara de widget
	- `cmd.widgets {Array}` o listă de widgeturi înregistrate
	- `cmd.remove() {Function}` îndepărtează widget-ul
	- `cmd.append(name)` înlocuiește widgetul temporar cu un nou widget (numele widgetului `name`)
- `format {String}` este un link la `function(toolbar)`
	- `toolbar` poate fi `null`
	- `toolbar.element {jQuery element}` este un element actual
	- `toolbar.node {HTML element}` este un element actual
	- `toolbar.widget {Object}` - o instanta de widget
	- `toolbar.style {Object}` conține un stil curent, de exemplu `bold: 1, link: 1`
- `upload {String}` este un link la `function(opt, callback)`
	- `opt.accept {String}` opțional
	- `opt.files {FileList}` opțional
	- `opt.multiple {Boolean}` opțional, standard: `false`
	- `opt.width {Number}` opțional
	- `opt.height {Number}` opțional
	- __IMPORTANT__: Argumentul `callback` trebuie executat după încărcare cu argumentul `files {Array}`
- `change {String}` este un link la `function(change)`
	- `change.id {String}` identificare
	- `change.block {String}` - un identificator de blocuri
	- `change.blockprev {String}` - un identificator de bloc anterior
	- `change.widget {String}` - un ID de widget
	- Tipul de funcționare `change.type {String}` (inser, actualizează, îndepărtează)
- `contextmenu {String}` un link la `function(widget)` atunci când utilizatorul a apăsat butonul drept de mouse pe widget
- `check {String}` este un link la `function(widget)` care decide dacă să permită editarea sau nu.
- `placeholder {String}` este un locator pentru widgetul HTML (default: `Press / for adding rich content`)

__Metode__:

- `component.save(function(data, ischange) {` pentru a salva conținutul
- `component.import(url or url_array, [callback])` pentru importul de widgeturi suplimentare
- `component.notify(event, [a], [b], [c], [d])` emite un eveniment în fiecare widget

__bine să știi__:

Componentul creează o variabilă globală numită `window.papercache {Object}` utilizată de toate exemplele `j-Paper`.

- componenta compară conținutul atunci când schimbați datele, astfel încât să puteți schimba datele în timp real
- componenta atribuie (în formular) clasa `paper-yourwidgetname` fiecărui element widget
- Cursuri de HTML `readonly`, `widget`, `selected`
	- Utilizare readonly: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` conține o instanță widget
	- Metoda `widget.remove()` va elimina widget-ul

__Cuvânt cheie în text edit__:

- `CMD + m` evidențiază textul
- `CMD + l` creează un link
- `CMD + p` adăuga un icon
- `CMD + b` înțelepciune
- `CMD + i` italiană
- `CMD + u` sublinează

__bine să știi__:

- Atribuția `[data-prevent]` poate împiedica evenimentul de clic în widget

## Utilizare

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

Servează indexul widgetului la /paper/db.json și fișierele sale de widget din aplicația ta.

Sursă : [Componente Total.js](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka și contribuitorii. [Licența mea](/knowledge-licenses.json).