j-Paper

De component bewerkt een document als een reeks widget objecten.Bind een modelpad naar die reeks, configureren de widget repository en gebruiken autosave om bewerken terug te schrijven naar het model.

• De productie is een eenvoudige Object Array structuur:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Widgets opslagruimte: https://github.com/totaljs/parts/tree/main/paper

Configuratie:

• De readonly {Number}-modus is niet meer mogelijk, maar de 0=disabled, 1=partially enabled en 2=fully enabled.
• parent {String} optioneel, een moederelement voor min-hoogte (default: null)
• margin {Number} extra marge voor min-hoogte (default: 0)
• De autosave {Boolean}-verandering wordt volgens de route automatisch gecertificeerd.
• widgets {String} een link naar de widgets (default: Componentator CDN)
  • Het kan meerdere adressen bevatten die door de comma mywidget1.html,/mywidget2.html,etc.. worden verdeeld.
  • Of je kunt houden De CDN structuur
• icon {String} een link naar de function(opt, callback)
  • opt.element {jQuery element}
  • IMPORTANT: noem het argument callback als de icoon is gewijzigd in het element
• link {String} een link naar de function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} een widget instantie
• command {String} een link naar de function(cmd)
  • cmd.widget {Object} een tijdelijke widget instantie
  • cmd.widgets {Array} een lijst met geregistreerde widgets
  • cmd.remove() {Function} verwijdert de widget
  • cmd.append(name) vervangt de huidige tijdelijke widget met een nieuwe widget (name naam van het widget)
• format {String} een link naar de function(toolbar)
  • toolbar kan null zijn
  • toolbar.element {jQuery element} een huidige element
  • toolbar.node {HTML element} een huidige element
  • toolbar.widget {Object} een widget instantie
  • toolbar.style {Object} bevat een huidige stijl, bijvoorbeeld bold: 1, link: 1
• upload {String} een link naar de function(opt, callback)
  • opt.accept {String} optie
  • opt.files {FileList} optie
  • opt.multiple {Boolean} optie, standaard: false
  • opt.width {Number} optie
  • opt.height {Number} optie
  • Het is belangrijk: callback Het argument moet na het uploaden met de files {Array} Argumenten
• change {String} een link naar de function(change)
  • change.id {String} identificatie
  • change.block {String} een blok identificeer
  • change.blockprev {String} een eerdere blok-identificator
  • change.widget {String} een widget ID
  • change.type {String} (invoeren, bijwerken en verwijderen)
• contextmenu {String} een link naar de function(widget) wanneer de gebruiker de rechtermuisknop op het widget drukte
• check {String} is een link naar de function(widget) die bepaalt of het bewerken mogelijk moet zijn of niet.
• placeholder {String} een plaatshouder voor de standaard HTML-widget (de standaard: Press / for adding rich content)

Methoden:

• component.save(function(data, ischange) { voor het besparen van inhoud
• component.import(url or url_array, [callback]) voor de invoer van extra widgets
• component.notify(event, [a], [b], [c], [d]) geeft evenementen uit in elke widget

Goed om te weten:

De component creëert een wereldwijde variabele genaamd window.papercache {Object} die wordt gebruikt door alle j-Paper instanties.

• de component vergelijkt de inhoud wanneer u gegevens wijzigt, zodat u gegevens in realtime kunt wijzigen
• de component toewijst (in het formulier) de paper-yourwidgetname-klasse aan elk widgetelement
• HTML-klassen readonly, widget, selected
  • Gebruik van: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} bevat een widgetinstantie
  • Methode widget.remove() verwijdert de widget

Kortschakeling in tekst Edit:

• CMD + m geeft tekst aan
• CMD + l maakt een link
• CMD + p toont een icon
• CMD + b Beroep
• CMD + i Italiaans
• CMD + u onderlijn

Goed om te weten:

• [data-prevent]-attribuut kan een klik evenement in het widget voorkomen

Gebruik

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

Dien de widget index op /paper/db.json en zijn widgetbestanden uit uw applicatie.

De bron: Total.js componentenCopyright Peter Širka en bijdragen. Mijn licentie.