j-Paper

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

<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. Copyright Peter Širka und Mitwirkende. MIT-Lizenz.