j-Paper

Componentul editează un document ca o serie de obiecte widget. legând o cale de model la acea linie, configurați repository-ul widget și utilizați autosave pentru a scrie editări înapoi la model.

• Produsul este o structură simplă Object Array:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Cuvânt cheie: https://github.com/totaljs/parts/tree/main/paper

Configurarea:

• readonly {Number} permite/disabilizează modul readonly 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} opțional, un element parental pentru min-înălțime (default: null)
• margin {Number} marjă suplimentară pentru min-înălțime (default: 0)
• Schimbările autosave {Boolean} sunt serializate în funcție de cale automată
• widgets {String} un link la widget-urile (default: Componentator CDN)
  • poate conține mai multe adrese împărțite de comma mywidget1.html,/mywidget2.html,etc..
  • sau puteţi menţine Structura CDN
• icon {String} este un link la function(opt, callback)
  • opt.element {jQuery element}
  • IMPORTANT: apelați argumentul callback dacă icoana a fost schimbată în element
• link {String} este un link la function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} - o instanta de widget
• command {String} este un link la function(cmd)
  • cmd.widget {Object} este o instanta temporara de widget
  • cmd.widgets {Array} o listă de widgeturi înregistrate
  • cmd.remove() {Function} îndepărtează widget-ul
  • cmd.append(name) înlocuiește widgetul temporar cu un nou widget (numele widgetului name)
• format {String} este un link la function(toolbar)
  • toolbar poate fi null
  • toolbar.element {jQuery element} este un element actual
  • toolbar.node {HTML element} este un element actual
  • toolbar.widget {Object} - o instanta de widget
  • toolbar.style {Object} conține un stil curent, de exemplu bold: 1, link: 1
• upload {String} este un link la function(opt, callback)
  • opt.accept {String} opțional
  • opt.files {FileList} opțional
  • opt.multiple {Boolean} opțional, standard: false
  • opt.width {Number} opțional
  • opt.height {Number} opțional
  • IMPORTANT: Argumentul callback trebuie executat după încărcare cu argumentul files {Array}
• change {String} este un link la function(change)
  • change.id {String} identificare
  • change.block {String} - un identificator de blocuri
  • change.blockprev {String} - un identificator de bloc anterior
  • change.widget {String} - un ID de widget
  • Tipul de funcționare change.type {String} (inser, actualizează, îndepărtează)
• contextmenu {String} un link la function(widget) atunci când utilizatorul a apăsat butonul drept de mouse pe widget
• check {String} este un link la function(widget) care decide dacă să permită editarea sau nu.
• placeholder {String} este un locator pentru widgetul HTML (default: Press / for adding rich content)

Metode:

• component.save(function(data, ischange) { pentru a salva conținutul
• component.import(url or url_array, [callback]) pentru importul de widgeturi suplimentare
• component.notify(event, [a], [b], [c], [d]) emite un eveniment în fiecare widget

bine să știi:

Componentul creează o variabilă globală numită window.papercache {Object} utilizată de toate exemplele j-Paper.

• componenta compară conținutul atunci când schimbați datele, astfel încât să puteți schimba datele în timp real
• componenta atribuie (în formular) clasa paper-yourwidgetname fiecărui element widget
• Cursuri de HTML readonly, widget, selected
  • Utilizare readonly: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} conține o instanță widget
  • Metoda widget.remove() va elimina widget-ul

Cuvânt cheie în text edit:

• CMD + m evidențiază textul
• CMD + l creează un link
• CMD + p adăuga un icon
• CMD + b înțelepciune
• CMD + i italiană
• CMD + u sublinează

bine să știi:

• Atribuția [data-prevent] poate împiedica evenimentul de clic în widget

Utilizare

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

Servează indexul widgetului la /paper/db.json și fișierele sale de widget din aplicația ta.

Sursă : Componente Total.jsCopyright Peter Širka și contribuitorii. Licența mea.