Node.js 不能在 Jade 中包含 wysiwyg.js 脚本

Question

在尝试创建富文本编辑器时，我似乎无法为按钮和表单添加 js 脚本。目前大部分功能都内嵌在了玉页中，但是很不优雅。

我有一个 layout.jade 文件：

doctype html
html
    head
body
    header
    section.content
    block content

还有 create.jade 脚本，我想要富文本编辑器：

extends ../layout

block content
    script(type='text/javascript', src='./css/js/wiz.js')
    form(method="post", action=post ? '/post/edit/' + post.id : '/post/create', onload="iFrameOn()")
        ul
         p
         input#title(name="title", placeholder="Title", value=post ? post.title : '', autocomplete='off')
         p
         #wysiwyg_cp(style="padding:8px; width:700px")
             input(type="button", onClick="iBold();", value="B")
             input(type="button", onClick="richTextField.document.execCommand(\"underline\",false,null);", value="U")
         p
         textarea#blogPostBody(style="display:none", name="blogPostBody", placeholder="Blog post text", rows="20", cols="50")
         iframe#richTextField(name="richTextField", contentEditable="true", onLoad="richTextField.document.designMode = 'On';")
                if(post)
                    | #{post.body}
                else
                    | &#09
         p
         input(onClick="javascript:submit_form();", type="button", name="myBtn", value="Save")

项目结构如下：

Proj
- css
 -- js
  --- wiz.js
- middleware
- node_modules
- public
- routes
- views
 -- post
  --- create.jade
 -- layout.jade
 -- home.jade
 -- login.jade
- app.js
- package.json

当我试图打开我的博客的创建部分时，我收到以下错误消息，如下图所示：

Uncaught SyntaxError: Unexpected token <

查看 chrome 堆栈：http://i.stack.imgur.com/JyHs2.png

wiz.js 文件如下所示：

function iFrameOn() { richTextField.document.designMode = 'On'; }

function iBold() { richTextField.document.execCommand("bold",false,null); }

function iUnderline(){ richTextField.document.execCommand("underline",false,null); }

function iItalic(){ richTextField.document.execCommand("italic",false,null); }

function iImage() {
    var imgSrc = prompt("EnterImageLocation", '');
    if(imgSrc!=null) {
        richTextField.document.execCommand("insertimage",false,imgSrc);
    }
}

function submit_form() {
    var theForm = document.getElementById("myForm");
    theForm.elements("myTextArea").value = window.frames['richTextField'].document.body.innerHTML;
    theForm.submit();
}

我也试过添加

 app.set('view options', {locals:{scripts:['wiz.js']}});

and/or 添加

app.use(express.static("./css/js"));

在 app.js 文件或中间件中。但这些都没有帮助。问题似乎出在"create.jade"脚本中，当引用'text/javascript'脚本时，因为即使引用不存在的js文件也会出现同样的错误。

谁能知道问题出在哪里？

[编辑] 实施的解决方案：

script
    include ./../../css/js/wiz.js

Answer 1

以下代码片段有效：

script include ./../../css/js/wiz.js

Answer 2

Express 的静态中间件默认会将文件挂载到根目录。因此，如果您像上面那样包含中间件，那么当您的服务器运行 - 这个是您应该放入 jade 文件中脚本标记的 src 属性中的路径，而不是本地路径（因为除非提供服务，否则客户端无法访问本地文件）。如果您想更改安装路径（例如，可以在 "/js/wiz.js" 而不是根目录上访问该文件），您可以添加它作为第一个参数，如下所示：

var localDirectoryPath = "./css/js";
// Or if you happened to want an absolute path
// (though it doesn't make a difference here):
// var localDirectoryPath = require("path").join(__dirname, "css", "js");

app.use("/js", express.static(localDirectoryPath));

您找到的临时解决方案（使用 Jade 的 include 函数）只是将文件的内容加载到服务器上（当 Jade 编译模板时）并在页面上的脚本标签之间插入代码, 这有效但肯定不理想，因为它会减慢 HTML 的初始加载速度，尤其是当 wiz.js 文件变大时。

而且我什至不会问为什么你的 javascript 目录在你的 css 目录中！

Node.js 不能在 Jade 中包含 wysiwyg.js 脚本

Cannot include wysiwyg.js script in Jade with Node.js

javascript

node.js

express

pug

wysiwyg