Как правильно реализовать / использовать quill с node.js и mongodb?
Итак, я пытаюсь создать себе блог и хочу, чтобы пользовательский интерфейс позволял мне обновлять блог, вместо того, чтобы каждый раз возиться с файлами HTML.
Я планирую получить контент (контент блога, содержащий изображения и текст) из редактора quill (который является дельта-объектом), а затем сохранить его в MongoDB.
Затем, когда мне нужно отобразить его, извлеките его из БД, а затем визуализируйте его динамически с помощью quill-render (https://www.npmjs.com/package/quill-render).
Вопрос в том, поскольку я не знаю, как работает перо, может ли кто-нибудь сказать мне, правильный ли это способ сделать это? Или лучше позволить quill каким-то образом экспортировать контент в файл HTML, сохранить его, а затем просто перенаправить на него? Заранее спасибо.
Ответы 2
Документация перо рекомендует вам управлять данными редактора в формате Дельта, что упрощает сохранение всего вашего контента в Json, но, с другой стороны, вам придется полагаться на библиотеку из тридцати сторон для визуализации его в формате HTML.
Для использования в формате Delta вам нужно будет использовать setContents() и getContents(). Сохранение в базе данных как Delta (См. Фрагмент в полноэкранном режиме для лучшей визуализации):
let quillEditor = new Quill('#editor', {
theme: 'snow'
});
quillEditor.on('text-change', function(){
console.clear();
console.info(quillEditor.getContents().ops);
});
//Retrieve your json from MongoDB
let myDocument = [{
"insert": "Hello "
},
{
"attributes": {
"bold": true
},
"insert": "World!"
},
{
"insert": "\n"
}
];
quillEditor.setContents(myDocument, );<script src = "//cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel = "stylesheet" href = "//cdn.quilljs.com/1.3.6/quill.snow.css">
<div id = "editor"></div>Еще один подход, который я использовал, - это получение HTML-кода непосредственно из редактора с помощью QuillInstance.root.innerHTML, что позволит вам сохранить в базе данных прямой HTML-файл, который вы можете отобразить позже:
let quillEditor = new Quill('#editor', {
theme: 'snow'
});
quillEditor.on('text-change', function(){
console.clear();
console.info(quillEditor.root.innerHTML);
});
//Retrieve your json from MongoDB
let myDocument = [{
"insert": "Hello "
},
{
"attributes": {
"bold": true
},
"insert": "World!"
},
{
"insert": "\n"
}
];
quillEditor.setContents(myDocument);<script src = "//cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel = "stylesheet" href = "//cdn.quilljs.com/1.3.6/quill.snow.css">
<div id = "editor"></div>Я настоятельно рекомендую вам хранить и манипулировать операциями Delta. Мы в значительной степени полагаемся на quill на Wisembly Jam, и мы манипулируем операциями в реальном времени с ShareDB и сохраняем их в PostgreSQL более устойчиво.
Просто используйте quill.getContents(), чтобы получить ops (это набор операций, простой JSON очень легко сохранить).
Затем, когда вы загружаете свою страницу, извлеките этот объект JSON из своей БД и используйте quill.setContents() для его правильной загрузки.
Это:
1) меньше для хранения, чем HTML 2) доказательство будущего (если Quill обновит и изменит что-то, он все равно будет правильно реализовывать формат Delta, не уверен, что он будет обрабатывать HTML таким же образом)