html - 如何将 Quill 与 express/node 一起使用

问题描述

我无法让 Quill 编辑器出现。

我有两个 ejs 文件，一个布局和一个 add_new（包括布局）。

布局.ejs



    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title><%= title %> </title>
      <link rel="stylesheet" href="/css/normalize.css">
      <link rel="stylesheet" href="/css/skeleton.css">
      <link rel="stylesheet" href="/css/styles.css">
      <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    </head>
    <body>
      
      <header class="interface-header">
        <h3 class="interface-title">
          <a href="/admin" id="interface-title">
            Διαχείρηση
          </a>
        </h3>
        <nav class="interface-nav">
          <ul class="interface-navbar-list">
            <li class="navbar-item">
              <a href="/admin/post/addNew" target="_blank" class="navbar-link button button-primary">
                Δημιουργία
              </a>
            </li>
            <li class="navbar-item">
              <a href="/" target="_blank" class="navbar-link button">
                Ιστοσελίδα
              </a>
            </li>
            <li class="navbar-item">
              <a href="/login/logout" class="navbar-link button-danger">
                Αποσύνδεση
              </a>
            </li>
          </ul>
        </nav>
      </header>
    </body>

    </html>

add_new.ejs

 

    
        <%- include("interface_layout.ejs") %> 
          <div class="container">
           <form action="/admin/posts" method="POST" enctype="multipart/form-data" class="admin-form">
            <label for="title">Τίτλος</label>
            <input type="text" name="title" id="title" class="u-full-width">
            <label for="content">Περιεχόμενο</label>
            <textarea name="content" id="content" rows="20" style="display: none;" class="u-full-width"></textarea>
            <div id="toolbar"></div>
            <div id="editor"><p>hello world</p></div>
            <% const choices = ["Συνεντεύξεις", "Θέατρο-Κριτική", "Εικαστικά", "test-ride"] %> 
            <label>Ετικέτες</label>
            <div class="choices">
              <% choices.forEach(choice => { %>
                <label for="<%= choice %>" class="choice"><%= choice %></label>
                <input type="checkbox" id="<%= choice %>" value="<%= choice %>" name="tags"     class="switch">
              <% }) %>
            </div>
            <label for="date">Ημερομηνία αρχικής δημοσίευσης</label>
            <input type="date" name="publishingDate" i="date">
            <label for="image">Εικόνα</label>
            <input type="file" name="image" id="image" accept="iamge/gif, image/png, image/jpeg">
            <button class="button-primary button" type="submit">Ανέβασμα</button>
          </form> 
          </div> 
    
       <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
        <!-- Initialize Quill editor -->
          <script>
            var options = {
              debug: "info",
              modules: {
                toolbar: "#toolbar"
              },
              placeholder: "Compose an epic...",
              readOnly: true,
              theme: "snow"
            }
            var container = document.getElementById("editor");
            var quill = new Quill(container, options);
          </script>

我正在尝试首先使用 cdn 使用 quill。我在我的 layout.ejs 中导入雪主题的 css，并在 add_new.ejs 的末尾导入 quill，然后使用脚本标签对其进行初始化。我无法让它出现。

我的控制台给了我这个：

内容安全策略：该页面的设置阻止了在https://cdn.quilljs.com/1.3.6/quill.js（“script-src ”）上加载资源。

我还尝试在我的 routes.js 中使用“const Quill = require("quill")" 并将编辑器作为变量传递给我的视图，但我明白了。

var elem = document.createElement('div'); ^

ReferenceError：文档未在对象中定义。(/node_modules/quill/dist/quill.js:7661:12)

我在一个普通的 index.html 文件和一个带有一个 ejs 文件的基本 express 项目上尝试了快速启动方法（在 quill 的网站上），并且 quill 两次都工作。我怀疑包含/模板有问题？

标签： htmlexpressejsquill

html - 如何将 Quill 与 express/node 一起使用

问题描述

解决方案

推荐阅读