Quill — это редактор форматированного текста, который предоставляет дельты изменений. Таким образом, вы можете построить довольно сложную систему ревизий документов в браузере.
Давайте сначала рассмотрим, как вы используете Quill.
Quill в JavaScript
Возможно множество настроек панели инструментов.
Как получить контент
Обычный текст
перо.getText()
HTML
quill.root.innerHTML
Дельта
Внося изменение как Quill Delta,
quill.getContents()
События
Можно прослушивать события, и обычно вам нужен HTML,
Изменить текст
Изменение выбора
Смена редактора
Сравнение редакций документов
Если вы сохранили содержимое различных редакций документа как дельту,
quill.getContents()
Затем вы можете сравнить версии, используя:
var diff = oldContent.diff(newContent);
Тем самым снова получив дельту.
Чтобы раскрасить разницу, используйте:
Скомпонуйте старый контент с цветовой разницей
var Adjusted = oldContent.compose(diff);
И отобразите отслеживаемые изменения в редакторе,
quill_diff.setContents(скорректировано);
Этот код адаптирован из Codepen Joe Pietruch.
Государственная библиотека супергосударства
superstate — это маленькая эффективная библиотека состояний, которая различает состояние и черновик.
Сначала вы определяете начальное состояние,
const text = superstate('
‹p›Hello World!‹/p›
‹p›Некоторый начальный ‹сильный›жирный‹/сильный› текст ‹/p›‹p›‹br›‹/ р›
')
Затем вы создаете черновик с помощью эскиза.
text.sketch('
‹p›Hello World!‹/p›
‹p›Некоторый начальный ‹strong›жирный‹/strong› текст ‹/p›
‹p›И ‹em›курсив‹/em›сцена‹/p›‹p›‹br›‹/p›
')
И вы публикуете его в штате с помощью publish
текст.опубликовать()
Используя суперсостояние вместе с приведенным выше кодом для сравнения версий документа, мы можем пересматривать документ, отслеживать изменения, а затем сохранять новую версию в состояние.
Постоянство
Когда вы работаете в браузере, вы должны автоматически сохранять свою работу, если она занимает больше нескольких минут.
Вы можете сделать это с суперсостоянием, используя адаптер localStorage,
import { superstate } from '@superstate/core'
import { ls } from '@superstate/adapters'
const text = superstate(').use([< br /> ls('doc'), // 'doc' — это ключ localStorage
])
И теперь каждое изменение состояния сохраняется в локальном хранилище. Это не относится к черновикам, если только вы не создадите состояние с помощью:
const count = superstate(0).use([ls(‘count’, { draft: true })])
Чего не хватает для полной системы версий?
Мы должны добавить компонент для принятия/отклонения выделенного изменения в редакторе.
Этот дизайн станет частью всей системы управления документами с рабочими процессами написания и редактирования.
