j-Paper

Komponent edytuje dokument jako szereg obiektów widgetowych.Zwiąż ścieżkę modelu do tego szeregu, skonfigurować magazyn widgetowy i użyć autosave do pisania edycji z powrotem do modelu.

• Produkcja jest prostą strukturą Object Array:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Rejestracja widgetów: https://github.com/totaljs/parts/tree/main/paper

Konfiguracja:

• readonly {Number} umożliwia/nie jest dostępny w trybie readonnym 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} opcjonalny, element macierzyński dla wysokości min (default: null)
• Dodatkowy margines margin {Number} dla wysokości min (default: 0)
• Zmiany autosave {Boolean} są automatycznie serializowane według ścieżki
• widgets {String} link do widgetów (default: Componentator CDN)
  • może zawierać wiele adresów podzielonych przez comma mywidget1.html,/mywidget2.html,etc..
  • lub możesz utrzymać Struktura CDN
• icon {String} - link do function(opt, callback)
  • opt.element {jQuery element}
  • WYJĘCIA: nazwać argument callback, jeśli ikona została zmieniona w elementie
• link {String} - link do function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} w przypadku widgetów
• command {String} - link do function(cmd)
  • cmd.widget {Object} - wstępny widget
  • cmd.widgets {Array} - lista zarejestrowanych widgetów
  • cmd.remove() {Function} usuwa widget
  • cmd.append(name) zastępuje bieżący widget tymczasowy nowym widgetem (nazwa widgetu name)
• format {String} - link do function(toolbar)
  • toolbar może być null
  • toolbar.element {jQuery element} - aktualny element
  • toolbar.node {HTML element} - aktualny element
  • toolbar.widget {Object} w przypadku widgetów
  • toolbar.style {Object} zawiera aktualny styl np. bold: 1, link: 1
• upload {String} - link do function(opt, callback)
  • opt.accept {String} opcjonalny
  • opt.files {FileList} opcjonalny
  • Opcjonalny opt.multiple {Boolean}, domyślny: false
  • opt.width {Number} opcjonalny
  • opt.height {Number} opcjonalny
  • WYWIĄZANIE: Argument callback musi być wykonany po przesłaniu z argumentem files {Array}
• change {String} - link do function(change)
  • change.id {String} identyfikator
  • change.block {String} - identyfikator bloku
  • change.blockprev {String} - identyfikator bloku
  • change.widget {String} - identyfikator widgetów
  • Typ operacyjny change.type {String} (wstawić, zaktualizować, usunąć)
• contextmenu {String} link do function(widget) gdy użytkownik naciśnił prawą przycisk myszy na widget
• check {String} jest linkem do function(widget), który decyduje, czy umożliwić edycję, czy nie
• placeholder {String} miejsce dla domyślnego widżetu HTML (domyślny: Press / for adding rich content)

Metody:

• component.save(function(data, ischange) { dla oszczędzania treści
• component.import(url or url_array, [callback]) do importu dodatkowych widgetów
• component.notify(event, [a], [b], [c], [d]) emituje wydarzenie w każdym widgetie

Dobrze wiedzieć:

Składnik tworzy globalną zmienną o nazwie window.papercache {Object}, która jest używana przez wszystkie instancje j-Paper.

• Składnik porównuje treść, gdy zmieniasz dane, dzięki czemu możesz zmienić dane w czasie rzeczywistym
• składnik przypisuje (w formie) klasę paper-yourwidgetname do każdego elementu widgetowego
• Klasy HTML readonly, widget, selected
  • Dostarczane do użytku: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} zawiera widget
  • Metoda widget.remove() usuwa widget

Krótki tekst w edycji:

• CMD + m podkreśla tekst
• CMD + l tworzy link
• CMD + p dodaje ikonę
• CMD + b - odważny
• Włoski CMD + i
• CMD + u Podsumowanie

Dobrze wiedzieć:

• Atrybut [data-prevent] może zapobiec kliknięciu w widgetie

Używanie

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

Serwuj indeks widgetów w /paper/db.json i jego pliki widgetowe z aplikacji.

Źródło : Składniki Total.jsCopyright Peter Širka i jego współpracownicy. Licencja.