Search code examples
javascriptnode.jsexpresspugwysiwyg

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


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: https://i.sstatic.net/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

Solution

  • The following snippet of code worked:

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