Невозможно включить скрипт wysiwyg.js в Jade с Node.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 < 

см хром стек: 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']}}); 

и/или добавление

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

В файле app.js или в промежуточном программном обеспечении. Но это не помогло. Проблема, похоже, связана с сценарием «create.jade» при ссылке на скрипт «text/javascript», поскольку такая же ошибка была получена даже при ссылке на несуществующий файл js.

Может ли кто-нибудь понять, в чем проблема?

[EDIT] решение, которое было реализовано:

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

Answer 1

Следующий фрагмент кода работает: статический промежуточного

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

Answer 2

Экспресса будет по умолчанию монтировать файлы в корневой каталог. Итак, если вы включите промежуточное программное обеспечение, как указано выше, файл wiz.js будет доступен по адресу «/wiz.js», когда ваш сервер работает - это путь, который вы должны поместить в атрибут src вашего тега сценария в файле jade , а не локальный путь (поскольку локальные файлы недоступны для клиента, если они не обслуживаются). Если вы хотите изменить путь к монтированию (так, например, что файл будет доступен на «/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)); 

временное решение, которое вы нашли (используя include функцию Джейд) является просто загружается содержимое файла на сервере (когда Джейд компилирует шаблон) и вставить код между тегами сценария на странице, которая работает но, конечно, не идеальна, так как это замедлит первоначальную загрузку вашего HTML, тем более что файл wiz.js станет больше.

И я даже не спрошу, почему ваш каталог javascript находится внутри вашего каталога css!