Link to custom code with the content editor web part

You can include code or content from another file on your page using a Plain Content Editor web part. The code is treated like it is a regular part of the page.

How to include the file

Add a content editor web part on your page where you want to include your file.
Edit the web part
Paste the URL of your file into the Content Link field at the top of the edit window and click ok. Save the page.

Your content should now be appearing on the page

Why?

Why would we want to include any of our content or code this way? Why not just write it directly into the content area of a content editor web part? SharePoint doesn't always react well to putting certain kinds of code on publishing pages and may try to alter it in some way and breaking the page.

Video Embeds/iFrames

Most video embeds these days like the ones from Youtube are done with iframe code. An iframe is html code that allows us to display one page inside a window on another page. So, when you embed a Youtube video with iframe code what you're really doing is creating a window on your page that shows a page on the Youtube servers that displays your video.

We've run into the situation where sometimes if you paste the iframe embed code directly into the page, when you later edit some text on the page Sharepoint will overwrite the URL in the iframe with the URL for the current page. So instead of a video displaying in your iframe it will display another copy of the page you're on.

If you put your iframe embed code into a separate html file then SharePoint won't try to edit the code and you can edit your page as much as you want and the video display will not be affected. You don't need to include <html>, <head>, or <body> tags in your file with the Youtube code, it should only have the iframe embed code. Remember this file is being included into the page as if it was already part of it, the page already has html, head, and body tags, so you don't need to add another set.

CSS and Javascript Code

Sometimes you need to add some CSS or javascript, and you only need it on one page, so it seems like the easiest thing to do is to just add the code directly into the page. Unfortunately SharePoint will ocassionally try to spell check your content. The spell checker was only meant to work with text formatted with very basic html, not CSS or Javascript code. When SharePoint finds what it thinks is an error in the text it will surround that word with a span tag with a class of "error" on it. On the front end this shows up as a red underline on the word, meant to get your attention so you can correct the spelling. But since the spell check was not meant to run on css or javascript it flags pretty much everything as being misspelled and it adds spans around every word, effectively destroying the code.

CSS code should be put into the customStyles.css file for the site, and not put into the page text. The only exception is if you need to target a web part ID on one page, if put into the customStyles.css for the site you might end up affecting web parts on other pages with the same ID. In that case create a separate file with your CSS and link it to the page.

Javascript should always be put into a separate file and linked to the page. If the javascript will be used on more than one page you can add it with the Embedded Content list.