# j-Paper

> Redigera rik innehåll som en lista med widgets.

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

Komponenten redigerar ett dokument som en uppsättning widgetobjekt. Bind en modellvägen till den uppsättningen, konfigurera widgetreservatet och använda autosave för att skriva redigeringar tillbaka till modellen.

- Produktionen är en enkel `Object Array` struktur:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Widgets förvaring: https://github.com/totaljs/parts/tree/main/paper

__Konfigurera__:

- `readonly {Number}` aktiverar/försvinner readonly läge `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` valfritt, ett föräldralement för min höjd (default: `null`)
- `margin {Number}` extra marginal för min höjd (default: `0`)
- `autosave {Boolean}`-ändringar serialiseras automatiskt enligt vägen
- `widgets {String}` en länk till widgeterna (default: Componentator CDN)
	- Det kan innehålla flera adresser uppdelade av comma `mywidget1.html,/mywidget2.html,etc..`
	- Eller du kan hålla [CDN struktur](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` en länk till `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __IMPORTANT__: ringa argumentet `callback` om ikonen har ändrats i elementet
- `link {String}` en länk till `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` en widget instans
- `command {String}` en länk till `function(cmd)`
	- `cmd.widget {Object}` en tillfällig widget instans
	- `cmd.widgets {Array}` en lista över registrerade widgets
	- `cmd.remove() {Function}` tar bort widget
	- `cmd.append(name)` ersätter den nuvarande tillfälliga widgeten med en ny widget (`name`-namn)
- `format {String}` en länk till `function(toolbar)`
	- `toolbar` kan vara `null`
	- `toolbar.element {jQuery element}` ett nuvarande element
	- `toolbar.node {HTML element}` ett nuvarande element
	- `toolbar.widget {Object}` en widget instans
	- `toolbar.style {Object}` innehåller en aktuell stil t.ex. `bold: 1, link: 1`
- `upload {String}` en länk till `function(opt, callback)`
	- `opt.accept {String}` alternativ
	- `opt.files {FileList}` alternativ
	- `opt.multiple {Boolean}` alternativ, standard: `false`
	- `opt.width {Number}` alternativ
	- `opt.height {Number}` alternativ
	- __IMPORTANT__: `callback`-argumentet måste utföras efter att ha laddat upp med `files {Array}`-argumenet
- `change {String}` en länk till `function(change)`
	- `change.id {String}` identifiering
	- `change.block {String}` en block identifierare
	- `change.blockprev {String}` en tidigare block identifierare
	- `change.widget {String}` en widget ID
	- `change.type {String}`-typ (inkludera, uppdatera och ta bort)
- `contextmenu {String}` en länk till `function(widget)` när användaren tryckte på rätt musknapp på widgeten
- `check {String}` en länk till `function(widget)` som bestämmer om du ska kunna redigera eller inte
- `placeholder {String}` en platsinnehavare för standard HTML-widget (default: `Press / for adding rich content`)

__Metoder__:

- `component.save(function(data, ischange) {` för att spara innehåll
- `component.import(url or url_array, [callback])` för import av ytterligare widgets
- `component.notify(event, [a], [b], [c], [d])` emitterar händelse i varje widget

__Bra att veta__:

Komponenten skapar en global variabel som kallas `window.papercache {Object}` som används av alla `j-Paper` instanser.

- komponenten jämför innehållet när du ändrar data, så att du kan ändra data i realtid
- komponenten tilldelar (i form) `paper-yourwidgetname`-klassen till varje widgetelement
- Förbehållna HTML-klasser `readonly`, `widget`, `selected`
	- Lägger användning: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` innehåller en widget instans
	- `widget.remove()`-metoden tar bort widgeten

__Kortfattat i text edit__:

- `CMD + m` visar texten
- `CMD + l` skapar en länk
- `CMD + p` lägger till en ikon
- `CMD + b` Hjärta
- `CMD + i` Italienska
- `CMD + u` underlinje

__Bra att veta__:

- `[data-prevent]`-attribut kan förhindra klick i widgeten

## Användning

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

Servera widgetindexet på /paper/db.json och dess widgetfiler från din applikation.

Källa till: [Total.js komponenter](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka och bidragsgivare. [Min licens](/knowledge-licenses.json).