# j-Paper

> Szerkesztse a gazdag tartalmat, mint egy widget listát.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 3cca0e34898692f6d6d146a7a3c4a8ff4e48f52b91098a4507531b512a420ce5
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

Az összetevő szerkeszt egy dokumentumot, mint a widget tárgyak sorozata. köti a modellt útvonalat erre a sorozatra, állítsa be a widgets tárolóhelyet, és használja az autosave-t, hogy szerkesztéseket írjon vissza a modellekhez.

- Az eredmény egy egyszerű `Object Array` szerkezet:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Személyi adatbázis: https://github.com/totaljs/parts/tree/main/paper

__konfiguráció__:

- A `readonly {Number}` engedélyezi / megakadályozza a `0=disabled`, `1=partially enabled`, `2=fully enabled` módot
- `parent {String}` opcionális, a min-magasság szülőelem (default: `null`)
- `margin {Number}` extra margin min-magasság (default: `0`)
- A `autosave {Boolean}` változások automatikusan sorozódnak az útvonal szerint
- `widgets {String}` a widgetekhez való link (default: Componentator CDN)
	- Több címet is tartalmazhat, amelyet a comma `mywidget1.html,/mywidget2.html,etc..` oszt meg.
	- vagy megtarthatod [CDN szerkezete](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` a `function(opt, callback)` címre
	- `opt.element {jQuery element}`
	- __FONTOS__: hívja a `callback` érvet, ha az ikon megváltozott az elemben
- `link {String}` a `function(opt)` címre
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` egy widget példány
- `command {String}` a `function(cmd)` címre
	- `cmd.widget {Object}` egy ideiglenes widget
	- `cmd.widgets {Array}` regisztrált widgetek listája
	- `cmd.remove() {Function}` eltávolítja a widget
	- `cmd.append(name)` helyettesíti a jelenlegi ideiglenes widget egy új widget (`name` név widget)
- `format {String}` a `function(toolbar)` címre
	- A `toolbar` lehet a `null`
	- `toolbar.element {jQuery element}` - jelenlegi elem
	- `toolbar.node {HTML element}` - jelenlegi elem
	- `toolbar.widget {Object}` egy widget példány
	- A `toolbar.style {Object}` jelenlegi stílust tartalmaz, például a `bold: 1, link: 1`
- `upload {String}` a `function(opt, callback)` címre
	- `opt.accept {String}` opcionális
	- `opt.files {FileList}` opcionális
	- `opt.multiple {Boolean}` opcionális, alapértelmezett: `false`
	- `opt.width {Number}` opcionális
	- `opt.height {Number}` opcionális
	- __FONTOS__: A `callback` érv futtatása után a `files {Array}` érvkel kell végrehajtani
- `change {String}` a `function(change)` címre
	- `change.id {String}` azonosító
	- `change.block {String}` egy blokk azonosító
	- `change.blockprev {String}` egy korábbi blokk azonosító
	- `change.widget {String}` egy widget azonosító
	- `change.type {String}` műveleti típus (beállítása, frissítése, eltávolítása)
- `contextmenu {String}` egy link a `function(widget)` amikor a felhasználó megnyomta a jobb egér gombot a widgeten
- `check {String}` egy link a `function(widget)` amely eldönti, hogy engedélyezze-e a szerkesztést vagy sem
- `placeholder {String}` egy helytartó az alapértelmezett HTML widget (default: `Press / for adding rich content`)

__módszerek__:

- `component.save(function(data, ischange) {` a tartalmak megtakarításához
- `component.import(url or url_array, [callback])` további widgetek importálására
- A `component.notify(event, [a], [b], [c], [d])` minden widgetben eseményt ad ki

__Jó tudni__:

Az összetevő létrehoz egy globális változó nevű `window.papercache {Object}` által használt minden `j-Paper` példák.

- Az összetevő összehasonlítja a tartalmat, amikor adatokat módosít, így valós idejű adatok megváltoztatása
- a komponens (a formában) `paper-yourwidgetname` osztályát minden widget elemre adja meg
- HTML osztályok `readonly`, `widget`, `selected`
	- Használat: `.readonly .paper-yourwidgetname { ... }`
- A `htmlelement.$widget {Object}` tartalmaz egy widget példát
	- A `widget.remove()` módszer eltávolítja a widgetet

__Rövid szövegek Edit__:

- A `CMD + m` hangsúlyozza a szöveg
- A `CMD + l` létrehoz egy linket
- A `CMD + p` egy ikonot ad
- `CMD + b` Boldog
- `CMD + i` Olaszország
- `CMD + u` aljzat

__Jó tudni__:

- A `[data-prevent]` tulajdonság megakadályozhatja a kattintást a widgetben

## Használat

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

Szolgáltatja a widget indexet /paper/db.json és annak widget fájlokat az alkalmazásból.

forrásból : [Total.js összetevők](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Szerzői jog Peter Širka és hozzájárulók. [A licenc](/knowledge-licenses.json).