j-Paper

Komponenta upravuje dokument jako řadu widgetových objektů.Vezměte modelovou cestu k tomuto řádku, nastavte widgetový záznam a použijte autosave pro psaní úprav zpět do modelu.

• Výstup je jednoduchá struktura Object Array:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Rozhraní widgetů: https://github.com/totaljs/parts/tree/main/paper

Konfigurace:

• readonly {Number} umožňuje/nesahuje readonly režim 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} volitelný, mateřský prvek pro min-výšku (podmínkou: null)
• margin {Number} dodatečná hranice pro min-výška (default: 0)
• Změny autosave {Boolean} jsou automaticky serializovány podle trasy
• widgets {String} odkaz na widgety (předvolené: Componentator CDN)
  • Může obsahovat více adres rozdělených komou mywidget1.html,/mywidget2.html,etc..
  • Nebo můžete udržet Struktura CDN
• icon {String} odkaz na function(opt, callback)
  • opt.element {jQuery element}
  • __VÍCE: nazve argument callback, pokud je ikona změněna v prvku
• link {String} odkaz na function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} - příklad widgetu
• command {String} odkaz na function(cmd)
  • cmd.widget {Object} - dočasný widget
  • cmd.widgets {Array} seznam registrovaných widgetů
  • cmd.remove() {Function} odstraní widget
  • cmd.append(name) nahrazuje stávající dočasný widget novým widgetem (jméno widgetu name)
• format {String} odkaz na function(toolbar)
  • toolbar Může být null
  • toolbar.element {jQuery element} - aktuální prvek
  • toolbar.node {HTML element} - aktuální prvek
  • toolbar.widget {Object} - příklad widgetu
  • toolbar.style {Object} obsahuje aktuální styl, např. bold: 1, link: 1
• upload {String} odkaz na function(opt, callback)
  • opt.accept {String} volitelné
  • opt.files {FileList} volitelné
  • opt.multiple {Boolean} Opční a default: false
  • opt.width {Number} volitelné
  • opt.height {Number} volitelné
  • IMPORTANT: Argument callback musí být proveden po uploadu s argumentem files {Array}
• change {String} odkaz na function(change)
  • change.id {String} identifikátor
  • change.block {String} - identifikační blok
  • change.blockprev {String} - předchozí blokový identifikátor
  • change.widget {String} - Widget ID
  • Typ provozu change.type {String} (vložení, aktualizace, odstranění)
• contextmenu {String} odkaz na function(widget) když uživatel stiskne pravou myš tlačítko na widgetu
• check {String} odkaz na function(widget), který rozhoduje, zda je možné editovat nebo ne
• placeholder {String} je místo pro výchozí HTML widget (důvodní: Press / for adding rich content)

Metody:

• component.save(function(data, ischange) { pro úsporu obsahu
• component.import(url or url_array, [callback]) pro dovoz dalších widgetů
• component.notify(event, [a], [b], [c], [d]) vydává události v každém widgetu

Dobré vědět:

Komponenta vytváří globální proměnnou nazvanou window.papercache {Object} používanou ve všech případech j-Paper.

• složka porovnává obsah při změně dat, takže můžete změnit data v reálném čase
• složka přiděluje (v podobě) třídu paper-yourwidgetname každému widgetu
• HTML třídy readonly, widget, selected
  • Přístup k použití: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} obsahuje widget
  • Metoda widget.remove() odstraní widget

Zkratky v textu Edit:

• CMD + m zdůrazňuje text
• CMD + l vytváří odkaz
• CMD + p přidává ikonu
• CMD + b Odvážný
• CMD + i Italský
• CMD + u podprsenka

Dobré vědět:

• [data-prevent] může zabránit kliknutí události v widgetu

Použití

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

Poskytujte index widgetu na /paper/db.json a jeho soubory widgetů z vaší aplikace.

Zdroj : Total.js součástiCopyright Peter Širka a jeho účastníci. Licence.