j-Paper

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

<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.jsCopyright Peter Širka e contribuintes. A licença.