j-Paper

Το συστατικό επεξεργάζεται ένα έγγραφο ως σειρά αντικειμένων 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
• 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

Χρήση

<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 συστατικάCopyright Peter Širka και συνεισφέροντες. Αδειοδότηση.