j-Paper

Le composant édite un document comme une série d'objets de widget.Lier une voie de modèle à cette ligne, configurer le repository de widgets, et utiliser autosave pour écrire des éditions en arrière au modèle.

• La production est une structure simple de Object Array :
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Réservatoire des widgets : https://github.com/totaljs/parts/tree/main/paper

Configuration :

• readonly {Number} permet/disable le mode readonly 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} optionnel, un élément parent pour min-high (defaut: null)
• margin {Number} marge supplémentaire pour min-height (defaut: 0)
• autosave {Boolean} Les changements sont sérialisés automatiquement selon la voie.
• widgets {String} un lien vers les widgets (defaut: Componentator CDN)
  • Il peut contenir plusieurs adresses divisées par le comma mywidget1.html,/mywidget2.html,etc..
  • Ou vous pouvez garder La structure du CDN
• icon {String} un lien vers le function(opt, callback)
  • opt.element {jQuery element}
  • IMPORTANT: appelez l'argument callback si l'icône a été modifiée dans l'élément
• link {String} un lien vers le function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} : une instance de widget
• command {String} un lien vers le function(cmd)
  • cmd.widget {Object} : une instance de widget temporaire
  • cmd.widgets {Array} une liste des widgets enregistrés
  • cmd.remove() {Function} supprime le widget
  • cmd.append(name) remplace le widget temporaire actuel avec un nouveau widget (nom du widget name)
• format {String} un lien vers le function(toolbar)
  • toolbar Peut être null
  • toolbar.element {jQuery element} Un élément actuel
  • toolbar.node {HTML element} Un élément actuel
  • toolbar.widget {Object} : une instance de widget
  • toolbar.style {Object} contient un style actuel, par exemple bold: 1, link: 1
• upload {String} un lien vers le function(opt, callback)
  • opt.accept {String} Optionnel
  • opt.files {FileList} Optionnel
  • opt.multiple {Boolean} optionnel, défaut : false
  • opt.width {Number} Optionnel
  • opt.height {Number} Optionnel
  • IMPORTANT: L'argument callback doit être exécuté après avoir été téléchargé avec l'argumentaire files {Array}
• change {String} un lien vers le function(change)
  • change.id {String} Identification
  • change.block {String} : un identifiant de bloc
  • change.blockprev {String} : un identifiant de bloc précédent
  • change.widget {String} : un widget id
  • Type de fonctionnement change.type {String} (insérer, mettre à jour, supprimer)
• contextmenu {String} un lien vers le function(widget) lorsque l'utilisateur a appuyé sur le bouton droit du widget
• check {String} est un lien vers le function(widget) qui décide si vous pouvez ou non éditer
• placeholder {String} un locataire pour le widget HTML par défaut (par défauts: Press / for adding rich content)

Méthodes :

• component.save(function(data, ischange) { pour le contenu économisé
• component.import(url or url_array, [callback]) pour l'importation de widgets supplémentaires
• component.notify(event, [a], [b], [c], [d]) émet un événement dans chaque widget

Bon à savoir :

Le composant crée une variable mondiale appelée window.papercache {Object} utilisée par toutes les instances de j-Paper.

• le composant comparera le contenu lorsque vous modifiez les données, afin que vous puissiez changer les données en temps réel
• le composant attribue (dans la forme) la classe paper-yourwidgetname à chaque élément de widget
• Classes HTML réservées readonly, widget, selected
  • Utilisation : .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} contient un widget
  • La méthode widget.remove() supprime le widget

Résumé de texte Edit:

• Le CMD + m met en valeur le texte
• Le CMD + l crée un lien
• CMD + p : une icône
• CMD + b Courageux
• CMD + i Italie
• CMD + u sous-line

Bon à savoir :

• L'attribut [data-prevent] peut empêcher l'événement de clic dans le widget

Utilisation

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

Servez l'indice widget sur /paper/db.json et ses fichiers widget de votre application.

Source : Composants Total.js. Copyright Peter Širka et contributeurs. Licence MIT.