# j-Paper

> Redigir conteúdo rico como uma lista de widgets.

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

O componente edita um documento como uma série de objetos de widget. vincular uma rota de modelo a essa linha, configurar o repository de widgets e usar autosave para escrever editores de volta ao modelo.

- A produção é uma estrutura simples de `Object Array`:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Reserva de widgets: https://github.com/totaljs/parts/tree/main/paper

__Configuração__:

- `readonly {Number}` permite/disabilita o modo readonly `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` opcional, um elemento parental para min-altura (default: `null`)
- Margem adicional de `margin {Number}` para min-altura (default: `0`)
- As mudanças de `autosave {Boolean}` são serializadas de acordo com o caminho automaticamente
- `widgets {String}` um link para os widgets (default: Componentator CDN)
	- Pode conter vários endereços divididos pelo comma `mywidget1.html,/mywidget2.html,etc..`
	- Ou você pode manter [Estrutura do CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` um link para o `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __IMPORTANT__: chame o argumento `callback` se a icona foi alterada no elemento
- `link {String}` um link para o `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` uma instância de widget
- `command {String}` um link para o `function(cmd)`
	- `cmd.widget {Object}` é um widget temporário
	- `cmd.widgets {Array}` uma lista de widgets registados
	- `cmd.remove() {Function}` remove o widget
	- `cmd.append(name)` substitui o widget temporário com um novo widget (nome do widget `name`)
- `format {String}` um link para o `function(toolbar)`
	- `toolbar` pode ser `null`
	- `toolbar.element {jQuery element}` um elemento atual
	- `toolbar.node {HTML element}` um elemento atual
	- `toolbar.widget {Object}` uma instância de widget
	- `toolbar.style {Object}` contém um estilo atual, por exemplo, `bold: 1, link: 1`
- `upload {String}` um link para o `function(opt, callback)`
	- `opt.accept {String}` opcional
	- `opt.files {FileList}` opcional
	- `opt.multiple {Boolean}` opcional, padrão: `false`
	- `opt.width {Number}` opcional
	- `opt.height {Number}` opcional
	- __IMPORTANTE__: o argumento `callback` deve ser executado após o upload com o argento `files {Array}`
- `change {String}` um link para o `function(change)`
	- Identificação de `change.id {String}`
	- `change.block {String}` um identificador de bloco
	- `change.blockprev {String}` um identificador de bloco anterior
	- `change.widget {String}` um widget ID
	- Tipo de operação `change.type {String}` (inserir, atualizar, remover)
- `contextmenu {String}` um link para o `function(widget)` quando o usuário pressionou o botão direito do mouse no widget
- `check {String}` um link para o `function(widget)` que decide se permitir a edição ou não
- `placeholder {String}` um local para o widget HTML padrão (default: `Press / for adding rich content`)

__Métodos__:

- `component.save(function(data, ischange) {` para o conteúdo
- `component.import(url or url_array, [callback])` para a importação de widgets adicionais
- `component.notify(event, [a], [b], [c], [d])` emite evento em cada widget

__Bom para saber__:

O componente cria uma variável global chamada `window.papercache {Object}` usada por todos os casos de `j-Paper`.

- O componente compara o conteúdo quando você muda dados, para que você possa mudar dados em tempo real
- O componente atribui (no formato) classe `paper-yourwidgetname` a cada elemento do widget
- Classificação de HTML `readonly`, `widget`, `selected`
	- Utilização: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` contém uma instância widget
	- O método `widget.remove()` irá remover o widget

__Curtas em texto edit__:

- `CMD + m` é um texto
- `CMD + l` cria um link
- `CMD + p` adiciona um ícone
- `CMD + b` - Obrigado
- `CMD + i` em português
- `CMD + u` em linha

__Bom para saber__:

- O atributo `[data-prevent]` pode impedir o evento de clique no 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>
```

Servir o índice de widget em /paper/db.json e seus arquivos de widgets da sua aplicação.

Fonte da fonte: [Componentes Total.js](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Copyright Peter Širka e contribuintes. [A licença](/knowledge-licenses.json).