QuillJS в форме не отображается
Я создаю урезанную, ориентированную на кемпинг версию Yelp, и я пытаюсь добавить поле для формы редактирования места для лагеря, которое немного более удобно для пользователя, чем простая текстовая область для описания, и поэтому я пытаюсь использовать QuillJS Rich Текстовый редактор. Тем не менее, я следовал их документам и примерам на их "игровой площадке" как мог, сохраняя актуальность для своего варианта использования, и по какой-то причине текстовый редактор не появляется - только текст, вставленный из базы данных как
, Я включил релевантные js, html и экраны, но пропустил css, так как размещать здесь довольно долго (241 строчка) и чувствую, что вряд ли это проблема (даже если бы это было так, я не смог бы сказать, какой бит) но я могу добавить позже, если кто-то посчитает это актуальным.
Весь HTML для формы (используя ejs для узла):
<form class="form-auth-form" action="/admin/approve/<%= campground._id %>?_method=put" method="POST">
<div class="form-group">
<input class="form-control" type="text" name="campground[name]" placeholder="* name" value="<%= campground.name %>" required>
</div>
<div class="input-group">
<span class="input-group-addon">£</span>
<input class="form-control" type="number" name="campground[cost]" placeholder="* cost per night" value="<%= campground.cost %>" min="0.00" step="0.01" required>
</div>
<div class="form-group">
<input class="form-control" type="text" name="campground[location]" id="location" placeholder="* location" value="<%= campground.location %>" required>
</div>
<div class="form-group">
<input class="form-control" type="text" name="campground[image]" placeholder="* image url" value="<%= campground.image %>" required>
</div>
<div class="form-group">
<input class="form-control" type="text" name="campground[contact][phone]" placeholder="phone number" value="<%= campground.contact.phone %>">
</div>
<div class="form-group">
<input class="form-control" type="text" name="campground[contact][email]" placeholder="email" value="<%= campground.contact.email %>">
</div>
<div class="form-group">
<input class="form-control" type="text" name="campground[contact][website]" placeholder="website link" value="<%= campground.contact.website %>">
</div>
<div class="row form-group">
<input name="campground[description]" type="hidden">
<div class="editor-container"></div>
<p><%= campground.description %></p>
</div>
</div>
<div class="form-group">
<button class="btn btn-info btn-lg btn-block form-auth-submit">Submit!</button>
</div>
</form>
Наиболее актуальный HTML
<div class="row form-group">
<input name="campground[description]" type="hidden">
<div class="editor-container"></div>
<p><%= campground.description %></p>
</div>
</div>
JS (добавлено в нижней части EJS в частичном)
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Quill CDN -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var editor = new Quill(".editor-container", {
options: {
debug: "info",
modules: {
toolbar: [
["bold", "italic"],
["link", "blockquote", "image"],
[{list: "ordered"}, {list: "bullet"}]
]
},
placeholder: "description",
readOnly: false,
theme: "snow"
}
});
var form = document.querySelector("form");
form.onsubmit = function() {
//populate hidden form on submit
var description = document.querySelector("input[name=campground[description]]");
description = JSON.stringify(quill.getContents());
console.log("Submitted", $(form).serialize(), $(form).serializeArray());
return false;
}
</script>
Следующий тег ссылки QuillJS css также находится в шапке
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
Скриншот проблемы: https://imgur.com/a/D63kj
Благодарю.