【发布时间】：2022-01-30 14:38:02
【问题描述】：
我无法显示 Quill 编辑器。
我有两个 ejs 文件，一个布局和一个 add_new（包括布局）。
layout.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 两次都可以工作。我怀疑包含/模板有问题？
【问题讨论】：
-
您是否尝试过下载 quill.js 文件并使用本地副本？我相信这将解决 CSP 问题。
-
我下载了源代码，但是从我的视图中需要 quill.js 文件（同时在我的公共/静态文件夹中拥有该文件）给我“导入声明可能只出现在模块的顶层" 在 quill.js 第 1 行。
-
这意味着 quill 正在使用 ES6 导入。对于 ES5 及更低版本，您可能需要使用 Babel 转换 quill 源代码。
-
感谢您的回复。我让 ckeditor5 开始工作了。