# j-Paper

> Επεξεργασία πλούσιου περιεχομένου ως λίστα με widgets.

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

Το συστατικό επεξεργάζεται ένα έγγραφο ως σειρά αντικειμένων widget. Συνδέστε μια διαδρομή μοντέλου σε αυτή τη γραμμή, ρυθμίστε το αποθεματικό widget και χρησιμοποιήστε autosave για να γράψετε τις επεξαγωγές πίσω στο μοντέλο.

- Η παραγωγή είναι μια απλή δομή `Object Array`:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Ετικέτες: https://github.com/totaljs/parts/tree/main/paper

__ΕΠΙΤΡΟΦΗ__:

- Το `readonly {Number}` επιτρέπει / απενεργοποιεί την οθόνη readonly `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` προαιρετικό, ένα γονικό στοιχείο για το ύψος του μίν (προεπιλεγμένο: `null`)
- Πρόσθετη περιθώριο `margin {Number}` για το ύψος του λεπτού (προεπιλογή: `0`)
- Οι αλλαγές του `autosave {Boolean}` καταγράφονται αυτόματα σύμφωνα με το μονοπάτι
- `widgets {String}` ένα σύνδεσμο με τα widgets (προεπιλεγμένο: Componentator CDN)
	- Μπορεί να περιέχει πολλαπλές διευθύνσεις που χωρίζονται από το comma `mywidget1.html,/mywidget2.html,etc..`
	- Ή μπορείτε να κρατήσετε [Η δομή του CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` Ένας σύνδεσμος με το `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __ΣΗΜΑΝΤΙΚΟ__: καλέστε το επιχείρημα `callback` εάν το εικονίδιο έχει αλλάξει στο στοιχείο
- `link {String}` Ένας σύνδεσμος με το `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}`: Ένα δίσκο
- `command {String}` Ένας σύνδεσμος με το `function(cmd)`
	- `cmd.widget {Object}`: Πρόκειται για προσωρινό widget
	- `cmd.widgets {Array}` - Λίστα εγγεγραμμένων widgets
	- Το `cmd.remove() {Function}` απομακρύνει το widget
	- Το `cmd.append(name)` αντικαθιστά το τρέχον προσωρινό widget με ένα νέο widget (το όνομα του widget `name`)
- `format {String}` Ένας σύνδεσμος με το `function(toolbar)`
	- `toolbar` Μπορεί να `null`
	- `toolbar.element {jQuery element}` Ένα τρέχον στοιχείο
	- `toolbar.node {HTML element}` Ένα τρέχον στοιχείο
	- `toolbar.widget {Object}`: Ένα δίσκο
	- Το `toolbar.style {Object}` περιέχει ένα τρέχον στυλ, π.χ. `bold: 1, link: 1`
- `upload {String}` Ένας σύνδεσμος με το `function(opt, callback)`
	- `opt.accept {String}` Εναλλακτικά
	- `opt.files {FileList}` Εναλλακτικά
	- `opt.multiple {Boolean}` Εναλλακτικά και προεπιλεγμένα: `false`
	- `opt.width {Number}` Εναλλακτικά
	- `opt.height {Number}` Εναλλακτικά
	- __ΣΗΜΑΝΤΙΚΟ__: Το επιχείρημα `callback` πρέπει να εκτελείται μετά την αναβάθμιση με το επιχείρηση `files {Array}`
- `change {String}` Ένας σύνδεσμος με το `function(change)`
	- `change.id {String}` αναγνωρισμός
	- `change.block {String}`: Ένα αναγνωριστικό μπλοκ
	- `change.blockprev {String}` - Προηγούμενο αναγνωριστικό μπλοκ
	- `change.widget {String}` - Δείκτης ID
	- Τύπος λειτουργίας `change.type {String}` (ενσωματώστε, ενημερώστε, αφαιρέστε)
- `contextmenu {String}` μια σύνδεση με το `function(widget)` όταν ο χρήστης πιέζει το δεξί κουμπί ποντικιού στο widget
- Το `check {String}` συνδέεται με το `function(widget)` που αποφασίζει αν θα επιτρέψει την επεξεργασία ή όχι.
- Το `placeholder {String}` είναι ένας χώρος για το προεπιλεγμένο widget HTML (προεπιλογή: `Press / for adding rich content`)

__Μέθοδοι__:

- `component.save(function(data, ischange) {` για την εξοικονόμηση περιεχομένου
- `component.import(url or url_array, [callback])` για την εισαγωγή πρόσθετων widgets
- `component.notify(event, [a], [b], [c], [d])` εκδίδει εκδήλωση σε κάθε widget

__Καλό να ξέρεις__:

Το συστατικό δημιουργεί μια παγκόσμια μεταβλητή που ονομάζεται `window.papercache {Object}` που χρησιμοποιείται από όλες τις παραδείξεις `j-Paper`.

- Το στοιχείο συγκρίνει το περιεχόμενο όταν αλλάζετε τα δεδομένα, έτσι ώστε να μπορείτε να αλλάξετε τα στοιχεία σε πραγματικό χρόνο
- Το στοιχείο αναθέτει (σε τη μορφή) την τάξη `paper-yourwidgetname` σε κάθε στοιχείο του widget
- Εξυπηρέτηση κλάσεων HTML `readonly`, `widget`, `selected`
	- Εισαγωγή σε: `.readonly .paper-yourwidgetname { ... }`
- Το `htmlelement.$widget {Object}` περιέχει ένα widget
	- Η μέθοδος `widget.remove()` θα αφαιρέσει το widget

__Σύντομες γραμμές στο κείμενο Edit__:

- Το `CMD + m` αναδεικνύει το κείμενο
- Το `CMD + l` δημιουργεί ένα σύνδεσμο
- Το `CMD + p` προσθέτει ένα εικονικό
- `CMD + b` Δύσκολη
- Ιταλικός `CMD + i`
- `CMD + u` Υπογραμμή

__Καλό να ξέρεις__:

- Το χαρακτηριστικό `[data-prevent]` μπορεί να αποτρέψει το γεγονός κλικ στο widget

## Χρήση

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

Υπηρετήστε τον δείκτη widget στο /paper/db.json και τα αρχεία του widget από την εφαρμογή σας.

Πηγή : [Total.js συστατικά](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka και συνεισφέροντες. [Αδειοδότηση](/knowledge-licenses.json).