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 stack：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文件或中间件中。但这些没有帮助。当引用“text / javascript”脚本时，问题似乎出现在“create.jade”脚本中，因为即使在引用不存在的js文件时也会获得相同的错误。

有谁能知道问题是什么？

[EDIT]已实施的解决方案：

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

Answer 1

以下代码片段有效：

\s

Answer 2

Express的静态中间件默认会将文件挂载到root。因此，如果您包含上述中间件，则当您的服务器正在运行时，＆＃34; /wiz.js" 可以访问wiz.js文件 - 此应该放在jade文件中脚本标记的src属性中的路径，而不是本地路径（因为除非提供本地文件，否则客户端无法访问本地文件）。如果要更改mountpath（例如，可以在＆＃34; /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＆＃39; include功能）仅仅是在服务器上加载文件的内容（当Jade编译模板时）并插入页面上的脚本标记之间的代码，但有效但肯定不理想，因为它会减慢HTML的初始加载速度，尤其是在wiz.js文件变大时。

我甚至不知道为什么你的javascript目录在你的css目录中！

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

2 个答案: