Каковы мои варианты сохранения и перезагрузки данных с помощью Quill.js? - PullRequest
Новая
       9

Каковы мои варианты сохранения и перезагрузки данных с помощью Quill.js?

0 голосов
/ 19 июня 2019

Я делаю приложение для заметок, и оно находится на ранних стадиях создания прототипов, поэтому я просто хочу собрать что-то, что будет работать для меня. Мой текстовый редактор построен с использованием Quill, и я использую Vue для структурирования всего приложения. В настоящее время у меня нет серверной части, поэтому нет server.js. Мне бы хотелось, чтобы мое приложение могло сохранять информацию, которую я поместил в редактор, и перезагружать информацию всякий раз, когда я перестраиваю приложение.

Я выбрал опцию автосохранения, предоставленную Quill здесь Но я не уверен, что делать с $.post и где его разместить.

Могу ли я просто опубликовать его в локальном файле .json?

Что лучше всего сохранить в моем случае? Пример регистрирует изменения, что я должен делать с изменениями?

Я заранее прошу прощения за отсутствие ясности в моем вопросе, так как я не знаю точно, что я должен просить, чтобы добиться того, чего я хочу. Любой совет приветствуется.

1 Ответ

0 голосов
/ 15 июля 2019

Так что, если я правильно понял, вы спрашиваете, как реализовать функцию автосохранения quilljs, когда у вас нет сервера.Но вы уже ответили на свои вопросы.

  • Простой способ сделать это - сохранить документ в локальном файле json.Но я не знаю, сможете ли вы сделать это, используя js.

  • Еще один способ сделать это - сохранить содержимое в локальном хранилище браузера и загружать данные каждый раз при загрузке приложения.

    var Delta = Quill.import('delta');
var quill = new Quill('#editor-container', {
  modules: {
    toolbar: true
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

// Store accumulated changes
var change = new Delta();
quill.on('text-change', function(delta) {
  change = change.compose(delta);
});

// Save periodically
setInterval(function() {
  if (change.length() > 0) {
    console.log('Saving changes', change);
    // Save the entire updated text to localStorage
    const data = JSON.stringify(quill.getContents())
    localStorage.setItem('storedText', data);
    change = new Delta();
  }
}, 5*1000);

// Check for unsaved data
window.onbeforeunload = function() {
  if (change.length() > 0) {
    return 'There are unsaved changes. Are you sure you want to leave?';
  }
}

Затем внутри mounted() компонента vue используйте следующую команду для извлечения сохраненных данных: 

const data = JSON.parse(localStorage.getItem('storedText'));
...