jsEditor - Inserting css and js Files

Aim: to demonstrate how to easily insert css and js files.

There are two ways you may want to link a css file or a js file to another file.

  1. Opening the file and linking it to an external css or js file.
  2. Opening the css or js file and linking it to another file.

For example, when you create a new file in a series, you might want to link it an external style sheet file (a css file) or to a JavaScript file (a js file).

To do this click somewhere in the HEAD of the document. The best place is just before the </HEAD> tag. Click so the cursor is just in front of the </HEAD> tag.

Click on a JS File in the fire box.

Now, right-click on the JS mode button (or click anywhere in the page if you are in JS Mode) and select from the pop-up menu Insert: JS File. jsEditor inserts the code.

For example, with an existing HTML file open in the Editor (I opened jsContents.htm), click just before the </HEAD> tag so the cursor is just in front of it.

Select a JS File from the file box. I selected jstripleMenu.js.

Select Insert: JS File from the popup menu.

jsEditor inserted the following code:




The JS File is now linked to the current file.

Double click on the name of the current file in the file box to reload the file. Choose 'No' when asked if you want to save your changes.

To enable this to work, you need to:

  1. Save the current file
  2. Select a JS File in the file box
  3. Click where you want to put the code - usually just before the </head> tag

You need to have saved the current file so the relative path can be computed. You need to select a JS file in the file box so jsEditor knows which file to link to. And you need to click where you want jsEditor to write the code.

You can insert a link to a style sheet file (css file) using the same procedure as above. Except you would do choose Insert: CSS File and select a css file in the file box.

Inserting a css or js file into another when you have the css or js file open

You can insert a css or js file into a file on your hard disc when the css or js file is open in the Editor. In JS Mode, right-click on the page and choose Link this css/js file to selected file. jsEditor will link the currently open css or js file to the file you have selected in the file box.

If it succeeds, it will say nothing. But if it encounters an error it will tell you. For example, it will not do the operation if:

  1. the current file is not a css/js file
  2. No file is selected in the file box
  3. The file selected in the file box already references a file with the same name as the current one. jsEditor will not add a link when a link already exists.

In these circumstances, jsEditor will tell you it has not performed the operation.


You have learned how to:

Next: How to