j-Paper

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

• Изходът е проста структура на 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
• 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

Използване

<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 съставкиАвторски права Питер Шърка и съучастници. Лицензът ми.