j-Paper

El componente edita un documento como una matriz de objetos de widget. Vincule una ruta de modelo a esa matriz, configure el repositorio de widgets y use el guardado automático para escribir las ediciones en el modelo.

• la salida es una estructura simple Object Array:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• repositorio de widgets: https://github.com/totaljs/parts/tree/main/paper

Configuración:

• readonly {Number} habilita/deshabilita el modo de solo lectura 0=disabled, 1=partially enabled, 2=fully enabled
• parent {String} opcional, un elemento principal para altura mínima (predeterminado: null)
• margin {Number} margen adicional para altura mínima (predeterminado: 0)
• autosave {Boolean} los cambios se serializan según la ruta automáticamente
• widgets {String} un enlace a los widgets (predeterminado: Componentator CDN)
  • puede contener varias direcciones divididas por la coma mywidget1.html,/mywidget2.html,etc..
  • o puedes conservar estructura CDN
• icon {String} un enlace al function(opt, callback)
  • opt.element {jQuery element}
  • IMPORTANTE: llame al argumento callback si el icono ha sido cambiado en el elemento
• link {String} un enlace al function(opt)
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} una instancia de widget
• command {String} un enlace al function(cmd)
  • cmd.widget {Object} una instancia de widget temporal
  • cmd.widgets {Array} una lista de widgets registrados
  • cmd.remove() {Function} elimina el widget
  • cmd.append(name) reemplaza el widget temporal actual con un nuevo widget (name nombre del widget)
• format {String} un enlace al function(toolbar)
  • toolbar puede ser null
  • toolbar.element {jQuery element} un elemento actual
  • toolbar.node {HTML element} un elemento actual
  • toolbar.widget {Object} una instancia de widget
  • toolbar.style {Object} contiene un estilo actual, p. bold: 1, link: 1
• upload {String} un enlace al function(opt, callback)
  • opt.accept {String} opcional
  • opt.files {FileList} opcional
  • opt.multiple {Boolean} opcional, predeterminado: false
  • opt.width {Number} opcional
  • opt.height {Number} opcional
  • IMPORTANTE: El argumento callback debe ejecutarse después de la carga con el argumento files {Array}.
• change {String} un enlace al function(change)
  • Identificador change.id {String}
  • change.block {String} un identificador de bloque
  • change.blockprev {String} un identificador de bloque anterior
  • change.widget {String} una identificación de widget
  • change.type {String} tipo de operación (insertar, actualizar, eliminar)
• contextmenu {String} un enlace al function(widget) cuando el usuario presiona el botón derecho del mouse en el widget
• check {String} un enlace al function(widget) que decide si habilitar la edición o no
• placeholder {String} un marcador de posición para el widget HTML predeterminado (predeterminado: Press / for adding rich content)

Métodos:

• component.save(function(data, ischange) { para guardar contenido
• component.import(url or url_array, [callback]) para importar widgets adicionales
• component.notify(event, [a], [b], [c], [d]) emite eventos en cada widget

Es bueno saberlo:

El componente crea una variable global llamada window.papercache {Object} utilizada por todas las instancias j-Paper.

• el componente compara el contenido cuando cambia los datos, por lo que puede cambiar los datos en tiempo real
• el componente asigna (en el formato) la clase paper-yourwidgetname a cada elemento del widget
• clases HTML reservadas readonly, widget, selected
  • uso de solo lectura: .readonly .paper-yourwidgetname { ... }
• htmlelement.$widget {Object} contiene una instancia de widget
  • El método widget.remove() eliminará el widget.

Atajos en la edición de texto:

• CMD + m resalta el texto
• CMD + l crea un enlace
• CMD + p agrega un ícono
• CMD + b negrita
• CMD + i cursiva
• CMD + u subrayado

Es bueno saberlo:

• El atributo [data-prevent] puede evitar el evento de clic en el widget

Uso

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

Entregue el índice del widget en /paper/db.json y sus archivos de widget desde su aplicación. La devolución de llamada para guardar recibe la matriz de widgets serializados.

Fuente: Total.js componentes. Copyright Peter Širka y colaboradores. Licencia MIT.