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

Благодарю.

0 ответов

Другие вопросы по тегам