# j-Paper

> Edite contenido enriquecido como una lista de widgets.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 88a9c8261da6f1747894ba11ec19da27cad5712b88e1ab36ca18509b89e51175
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

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](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `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

```html
<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](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper). Copyright Peter Širka y colaboradores. [Licencia MIT](/knowledge-licenses.json).