j-Paper

Komponenten redigerar ett dokument som en uppsättning widgetobjekt. Bind en modellvägen till den uppsättningen, konfigurera widgetreservatet och använda autosave för att skriva redigeringar tillbaka till modellen.

• Produktionen är en enkel Object Array struktur:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Widgets förvaring: https://github.com/totaljs/parts/tree/main/paper

Konfigurera:

• readonly {Number} aktiverar/försvinner readonly läge 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} valfritt, ett föräldralement för min höjd (default: null)
• margin {Number} extra marginal för min höjd (default: 0)
• autosave {Boolean}-ändringar serialiseras automatiskt enligt vägen
• widgets {String} en länk till widgeterna (default: Componentator CDN)
  • Det kan innehålla flera adresser uppdelade av comma mywidget1.html,/mywidget2.html,etc..
  • Eller du kan hålla CDN struktur
• icon {String} en länk till function(opt, callback)
  • opt.element {jQuery element}
  • IMPORTANT: ringa argumentet callback om ikonen har ändrats i elementet
• link {String} en länk till function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} en widget instans
• command {String} en länk till function(cmd)
  • cmd.widget {Object} en tillfällig widget instans
  • cmd.widgets {Array} en lista över registrerade widgets
  • cmd.remove() {Function} tar bort widget
  • cmd.append(name) ersätter den nuvarande tillfälliga widgeten med en ny widget (name-namn)
• format {String} en länk till function(toolbar)
  • toolbar kan vara null
  • toolbar.element {jQuery element} ett nuvarande element
  • toolbar.node {HTML element} ett nuvarande element
  • toolbar.widget {Object} en widget instans
  • toolbar.style {Object} innehåller en aktuell stil t.ex. bold: 1, link: 1
• upload {String} en länk till function(opt, callback)
  • opt.accept {String} alternativ
  • opt.files {FileList} alternativ
  • opt.multiple {Boolean} alternativ, standard: false
  • opt.width {Number} alternativ
  • opt.height {Number} alternativ
  • IMPORTANT: callback-argumentet måste utföras efter att ha laddat upp med files {Array}-argumenet
• change {String} en länk till function(change)
  • change.id {String} identifiering
  • change.block {String} en block identifierare
  • change.blockprev {String} en tidigare block identifierare
  • change.widget {String} en widget ID
  • change.type {String}-typ (inkludera, uppdatera och ta bort)
• contextmenu {String} en länk till function(widget) när användaren tryckte på rätt musknapp på widgeten
• check {String} en länk till function(widget) som bestämmer om du ska kunna redigera eller inte
• placeholder {String} en platsinnehavare för standard HTML-widget (default: Press / for adding rich content)

Metoder:

• component.save(function(data, ischange) { för att spara innehåll
• component.import(url or url_array, [callback]) för import av ytterligare widgets
• component.notify(event, [a], [b], [c], [d]) emitterar händelse i varje widget

Bra att veta:

Komponenten skapar en global variabel som kallas window.papercache {Object} som används av alla j-Paper instanser.

• komponenten jämför innehållet när du ändrar data, så att du kan ändra data i realtid
• komponenten tilldelar (i form) paper-yourwidgetname-klassen till varje widgetelement
• Förbehållna HTML-klasser readonly, widget, selected
  • Lägger användning: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} innehåller en widget instans
  • widget.remove()-metoden tar bort widgeten

Kortfattat i text edit:

• CMD + m visar texten
• CMD + l skapar en länk
• CMD + p lägger till en ikon
• CMD + b Hjärta
• CMD + i Italienska
• CMD + u underlinje

Bra att veta:

• [data-prevent]-attribut kan förhindra klick i widgeten

Användning

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

Servera widgetindexet på /paper/db.json och dess widgetfiler från din applikation.

Källa till: Total.js komponenterCopyright Peter Širka och bidragsgivare. Min licens.