# j-Paper

> Edit rijke content als een lijst met widgets.

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

De component bewerkt een document als een reeks widget objecten.Bind een modelpad naar die reeks, configureren de widget repository en gebruiken autosave om bewerken terug te schrijven naar het model.

- De productie is een eenvoudige `Object Array` structuur:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Widgets opslagruimte: https://github.com/totaljs/parts/tree/main/paper

__Configuratie__:

- De `readonly {Number}`-modus is niet meer mogelijk, maar de `0=disabled`, `1=partially enabled` en `2=fully enabled`.
- `parent {String}` optioneel, een moederelement voor min-hoogte (default: `null`)
- `margin {Number}` extra marge voor min-hoogte (default: `0`)
- De `autosave {Boolean}`-verandering wordt volgens de route automatisch gecertificeerd.
- `widgets {String}` een link naar de widgets (default: Componentator CDN)
	- Het kan meerdere adressen bevatten die door de comma `mywidget1.html,/mywidget2.html,etc..` worden verdeeld.
	- Of je kunt houden [De CDN structuur](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` een link naar de `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __IMPORTANT__: noem het argument `callback` als de icoon is gewijzigd in het element
- `link {String}` een link naar de `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` een widget instantie
- `command {String}` een link naar de `function(cmd)`
	- `cmd.widget {Object}` een tijdelijke widget instantie
	- `cmd.widgets {Array}` een lijst met geregistreerde widgets
	- `cmd.remove() {Function}` verwijdert de widget
	- `cmd.append(name)` vervangt de huidige tijdelijke widget met een nieuwe widget (`name` naam van het widget)
- `format {String}` een link naar de `function(toolbar)`
	- `toolbar` kan `null` zijn
	- `toolbar.element {jQuery element}` een huidige element
	- `toolbar.node {HTML element}` een huidige element
	- `toolbar.widget {Object}` een widget instantie
	- `toolbar.style {Object}` bevat een huidige stijl, bijvoorbeeld `bold: 1, link: 1`
- `upload {String}` een link naar de `function(opt, callback)`
	- `opt.accept {String}` optie
	- `opt.files {FileList}` optie
	- `opt.multiple {Boolean}` optie, standaard: `false`
	- `opt.width {Number}` optie
	- `opt.height {Number}` optie
	- Het is belangrijk: `callback` Het argument moet na het uploaden met de `files {Array}` Argumenten
- `change {String}` een link naar de `function(change)`
	- `change.id {String}` identificatie
	- `change.block {String}` een blok identificeer
	- `change.blockprev {String}` een eerdere blok-identificator
	- `change.widget {String}` een widget ID
	- `change.type {String}` (invoeren, bijwerken en verwijderen)
- `contextmenu {String}` een link naar de `function(widget)` wanneer de gebruiker de rechtermuisknop op het widget drukte
- `check {String}` is een link naar de `function(widget)` die bepaalt of het bewerken mogelijk moet zijn of niet.
- `placeholder {String}` een plaatshouder voor de standaard HTML-widget (de standaard: `Press / for adding rich content`)

__Methoden__:

- `component.save(function(data, ischange) {` voor het besparen van inhoud
- `component.import(url or url_array, [callback])` voor de invoer van extra widgets
- `component.notify(event, [a], [b], [c], [d])` geeft evenementen uit in elke widget

__Goed om te weten__:

De component creëert een wereldwijde variabele genaamd `window.papercache {Object}` die wordt gebruikt door alle `j-Paper` instanties.

- de component vergelijkt de inhoud wanneer u gegevens wijzigt, zodat u gegevens in realtime kunt wijzigen
- de component toewijst (in het formulier) de `paper-yourwidgetname`-klasse aan elk widgetelement
- HTML-klassen `readonly`, `widget`, `selected`
	- Gebruik van: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` bevat een widgetinstantie
	- Methode `widget.remove()` verwijdert de widget

__Kortschakeling in tekst Edit__:

- `CMD + m` geeft tekst aan
- `CMD + l` maakt een link
- `CMD + p` toont een icon
- `CMD + b` Beroep
- `CMD + i` Italiaans
- `CMD + u` onderlijn

__Goed om te weten__:

- `[data-prevent]`-attribuut kan een klik evenement in het widget voorkomen

## Gebruik

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

Dien de widget index op /paper/db.json en zijn widgetbestanden uit uw applicatie.

De bron: [Total.js componenten](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka en bijdragen. [Mijn licentie](/knowledge-licenses.json).