# j-Paper

> Bearbeiten Sie Rich Content als Liste von Widgets.

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

Die Komponente bearbeitet ein Dokument als eine Reihe von Widget-Objekten.Binden Sie einen Modellweg zu dieser Reihe, konfigurieren Sie das Widget Repository und verwenden Sie AutoSave, um Bearbeitungen zurück zum Modell zu schreiben.

- Die Produktion ist eine einfache `Object Array` Struktur:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Widgets-Rahmen: https://github.com/totaljs/parts/tree/main/paper

__Konfiguration__:

- `readonly {Number}` ermöglicht / abgeschaltet readonly-Modus `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` optionale, ein Elternteil für Min-Höhe (Default: `null`)
- `margin {Number}` zusätzliche Marge für Min-Höhe (Default: `0`)
- `autosave {Boolean}`-Veränderungen werden nach dem Weg automatisch serialisiert
- `widgets {String}` eine Verbindung zu den Widgets (Default: Componentator CDN)
	- Es kann mehrere Adressen enthalten, die durch den Comma `mywidget1.html,/mywidget2.html,etc..` geteilt werden
	- Oder Sie können halten [CDN Struktur](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` ein Link zum `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __WELT__: rufen Sie das `callback` Argument an, wenn die Ikon im Element geändert wurde
- `link {String}` ein Link zum `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` ein Widget-Instanzen
- `command {String}` ein Link zum `function(cmd)`
	- `cmd.widget {Object}` ein temporärer Widget-Instanz
	- `cmd.widgets {Array}` eine Liste der registrierten Widgets
	- `cmd.remove() {Function}` Entfernen von Widget
	- `cmd.append(name)` ersetzt das aktuelle temporäre Widget mit einem neuen Widget (`name` Name des Widgets)
- `format {String}` ein Link zum `function(toolbar)`
	- `toolbar` kann `null` sein
	- `toolbar.element {jQuery element}` ein aktuellen Element
	- `toolbar.node {HTML element}` ein aktuellen Element
	- `toolbar.widget {Object}` ein Widget-Instanzen
	- `toolbar.style {Object}` enthält einen aktuellen Stil, z. B. `bold: 1, link: 1`
- `upload {String}` ein Link zum `function(opt, callback)`
	- `opt.accept {String}` optional
	- `opt.files {FileList}` optional
	- `opt.multiple {Boolean}` optionale, Standard: `false`
	- `opt.width {Number}` optional
	- `opt.height {Number}` optional
	- __IMPORTANT__: `callback` Argument muss nach der Einladung mit dem `files {Array}` Argument ausgeführt werden
- `change {String}` ein Link zum `function(change)`
	- `change.id {String}` Identifizierung
	- `change.block {String}` ein Blockidentifikator
	- `change.blockprev {String}` ein vorheriger Block-Identifikator
	- `change.widget {String}` ein Widget-ID
	- `change.type {String}` - Betriebstyp (Sie geben, aktualisieren und entfernen)
- `contextmenu {String}` eine Verbindung zum `function(widget)` wenn der Benutzer den rechten Maus-Taste auf dem Widget drückte
- `check {String}` eine Verbindung zum `function(widget)` , die entscheidet, ob zu bearbeiten oder nicht
- `placeholder {String}` ist ein Standort für das Standard-HTML-Widget (Default: `Press / for adding rich content`)

__Methoden__:

- `component.save(function(data, ischange) {` für den Inhalt
- `component.import(url or url_array, [callback])` für die Einfuhr von zusätzlichen Widgets
- `component.notify(event, [a], [b], [c], [d])` gibt ein Ereignis in jedem Widget

__Gut zu wissen__:

Die Komponente erzeugt eine globale Variable namens `window.papercache {Object}`, die von allen `j-Paper`-Instanzen verwendet wird.

- die Komponente vergleicht den Inhalt, wenn Sie Daten ändern, so dass Sie Daten in Echtzeit ändern können
- die Komponente (in der Form) `paper-yourwidgetname`-Klasse an jedes Widget-Element zugeordnet
- Reservierte HTML-Klassen `readonly`, `widget`, `selected`
	- Weiterverwendung: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` enthält eine Widget-Instanz
	- `widget.remove()`-Methode wird das Widget entfernen

__Kurzgeschnitten in Text Edit__:

- `CMD + m` zeigt den Text
- `CMD + l` schafft einen Link
- `CMD + p` fügt eine Ikon hinzu
- `CMD + b` Hürde
- `CMD + i` Italienisch
- `CMD + u` Unterschrift

__Gut zu wissen__:

- `[data-prevent]`-Attribute kann das Klicksverhalten im Widget verhindern

## Nutzung

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

Stellen Sie den Widget-Index unter /paper/db.json und seine Widget-Dateien aus Ihrer Anwendung bereit. Der Save-Callback empfängt das serialisierte Widget-Array.

Quelle: [Total.js Komponenten](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper). Copyright Peter Širka und Mitwirkende. [MIT-Lizenz](/knowledge-licenses.json).