# j-Paper

> Редактиране на богато съдържание като списък с виџети.

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

Компонентът редактира документ като серия от обекти на виджета.Свържете моделния път към този ред, конфигурирайте репозитория на виџетите и използвайте автозащита, за да напишете редакти обратно към модела.

- Изходът е проста структура на `Object Array`:
	- `[{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]`
- Репозитор на видове: https://github.com/totaljs/parts/tree/main/paper

__Конфигуриране__:

- `readonly {Number}` позволява/изключва readonly режим `0=disabled`, `1=partially enabled`, `2=fully enabled`
- `parent {String}` опционален, родителски елемент за минимална височина (предварително: `null`)
- Допълнителна маржа на `margin {Number}` за минимална височина (предварително: `0`)
- Промените в `autosave {Boolean}` се сериализират автоматично според маршрута
- `widgets {String}` връзка към виджетите (предварително: Componentator CDN)
	- Тя може да съдържа няколко адреси, разделени от comma `mywidget1.html,/mywidget2.html,etc..`
	- Или можете да запазите [Структура на CDN](https://github.com/totaljs/parts/blob/main/cdn/paper/db.json)
- `icon {String}` е връзка към `function(opt, callback)`
	- `opt.element {jQuery element}`
	- __Важен: наричайте аргумента на `callback`, ако иконата е променена в елемента
- `link {String}` е връзка към `function(opt)`
	- `opt.element {jQuery element}`
	- `opt.href {String}`
	- `opt.target {String}`
	- `opt.widget {Object}` - Виджетни инстанции
- `command {String}` е връзка към `function(cmd)`
	- `cmd.widget {Object}` - Временна версия
	- `cmd.widgets {Array}` списък с регистрирани видове
	- `cmd.remove() {Function}` премахва виджета
	- `cmd.append(name)` замества текущия временно виџет с нов виџит (наречен на виџето `name`)
- `format {String}` е връзка към `function(toolbar)`
	- `toolbar` Може да бъде `null`
	- `toolbar.element {jQuery element}` е текущ фактор
	- `toolbar.node {HTML element}` е текущ фактор
	- `toolbar.widget {Object}` - Виджетни инстанции
	- `toolbar.style {Object}` съдържа текущ стил, например `bold: 1, link: 1`
- `upload {String}` е връзка към `function(opt, callback)`
	- `opt.accept {String}` Опционално
	- `opt.files {FileList}` Опционално
	- `opt.multiple {Boolean}` опция, дефолт: `false`
	- `opt.width {Number}` Опционално
	- `opt.height {Number}` Опционално
	- __ВЪЗМОЖНО__: Аргументът `callback` трябва да бъде изпълнен след изтегляне с аргумента `files {Array}`
- `change {String}` е връзка към `function(change)`
	- `change.id {String}` Идентифициране
	- `change.block {String}` - идентификатор на блока
	- `change.blockprev {String}` - предишен идентификатор на блок
	- `change.widget {String}` - Виджит ИД
	- `change.type {String}` Тип на работа (включете, актуализирайте и премахнете)
- `contextmenu {String}` връзка към `function(widget)` когато потребителят натисне десния бутон на виџет
- `check {String}` е линк към `function(widget)` , който решава дали да разреши редактирането или не
- `placeholder {String}` е местоположението за подразбиране на HTML (предварително: `Press / for adding rich content`)

__Методи__:

- `component.save(function(data, ischange) {` за съхранение на съдържание
- `component.import(url or url_array, [callback])` за внос на допълнителни видове
- `component.notify(event, [a], [b], [c], [d])` издава събитие във всеки видж

__Добре е да се знае__:

Съставът създава глобална променлива, наречена `window.papercache {Object}`, използвана от всички случаи на `j-Paper`.

- компонентът сравнява съдържанието, когато промените данните, така че можете да промените данни в реално време
- компонентът приписва (в формата) клас `paper-yourwidgetname` на всеки елемент на виджта
- Задължителни HTML класове `readonly`, `widget`, `selected`
	- Използване на: `.readonly .paper-yourwidgetname { ... }`
- `htmlelement.$widget {Object}` съдържа виџет
	- Методът `widget.remove()` ще премахне виджета

__Кратки текстове в Edit__:

- `CMD + m` подчертава текста
- `CMD + l` създава връзка
- `CMD + p` добавя икона
- `CMD + b` Смелостта
- `CMD + i` Италиански
- `CMD + u` Под линия

__Добре е да се знае__:

- Атрибутът `[data-prevent]` може да предотврати кликване на събитията в widget

## Използване

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

Сервирайте индекса на виџетите в /paper/db.json и неговите виџети файлове от приложението си.

Източникът е: [Total.js съставки](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-Paper)Авторски права Питер Шърка и съучастници. [Лицензът ми](/knowledge-licenses.json).