无法在Jade中将Node.js包含wysiwyg.js脚本

Question

While trying to create a rich text editor, I cannot seem to add the js script for the buttons and form. Right now, most of the functions are inlined in the jade pages, but that is quite unelegant.

I have a layout.jade file:

doctype html
html
    head
body
    header
    section.content
    block content

And the create.jade script, where I want the rich text editor:

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")

The structure of the project looks like:

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

When trying to open the create section of my blog, I get the following error message, as can be seen in the image below:

Uncaught SyntaxError: Unexpected token < 

See chrome stack: http://i.stack.imgur.com/JyHs2.png

The wiz.js file looks like this:

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();
}

I have also tried adding

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

and/or adding

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

In the app.js file or in the middleware. But these did not help. The problem seem to be in the "create.jade" script, when referencing the 'text/javascript' script, because the same error was obtained even when referencing a non-existant js file.

Could anyone have any idea what the problem could be?

[EDIT] SOLUTION that was implemented:

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

Answer 1

以下代码段有效：

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

Answer 2

Express's static middleware will by default mount the files to the root. So, if you include the middleware as above, the wiz.js file will be accessible at "/wiz.js" when your server's running -- this is the path you should put in the src attribute of your script tag in the jade file, not the local path (since local files are not accessible to the client unless they are served). If you want to change the mountpath (so, for example, that the file will be accessible on "/js/wiz.js" , rather than the root), you can add it as a first argument, like below:

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));

The temporary solution that you've found (using Jade's include function) is merely loading the file's contents on the server (when Jade compiles the template) and inserting the code in between script tags on your page, which works but is certainly not ideal, since it will slow down the initial loading of your HTML, especially as the wiz.js file gets bigger.

And I won't even ask why your javascript directory is inside your css directory!