Bizzare install issue with CKEditor

Question

I've come across an interesting technical problem that perhaps might be a concern to others.

Let me start by explaining what I can do successfully.

Inside of my app I have a textarea that I successfully converted to CKEditor using the CDN.

Here is what I did for a working solution:

<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
...
<textarea rows="15" cols="60" id="Description" name="Description"></textarea>
...
<script>CKEDITOR.replace('Description');</script>

It works!

But I cannot get it to install when the CKEditor files are on my server no matter what I throw at it. You will see that I am very thorough in my troubleshooting.

When I downloaded and installed the full package or standard or basic or old versions from both the zip file and also from the tar.gz file using different utilities for the extraction (I've tried it all), and I replaced the js include file with what is on my server:

<script src='/jscripts/ckeditor/ckeditor.js'></script>

or

<script src='//www.example.com/jscripts/ckeditor/ckeditor.js'></script>

I end up with a big blank space instead of my textarea and it is a little larger than what CKEditor replaces when it is working via the CDN. There are no javascript errors. In fact, when viewing the DOM inside the console, I can see that the CKEditor takes over and seems to be doing the right thing.

So then I view the samples page inside my browser. The same thing happens. Big empty space where CKEditor should show up, but it is not visible. But then I discovered something. Inside of my Chrome console, I look for the div with id "cke_editor1" and the .cdk (CSS class) visibility is set to hidden. So I use Chrome to change it to make it visible and then I can see everything, but it is stripped of all of its CSS. It shows hyperlinks instead of buttons, etc. Also, the sample pages themselves are looking kind of plain, Times New Roman font, not pretty. Maybe I'm experiencing a CSS problem?

Chrome browser cache killer on. Cache killer off. Refresh many times in between. Nope, not the browser cache.

Alright then, maybe some of the files aren't being fully accessed, so the next thing I tried is setting permissions to ALL the ckeditor files to 777:

/jscripts
chmod -R 777 ckeditor

I checked and verified that EVERY file in ckeditor is 777 now. Same problem continues to happen.

So, I don't know, maybe it's an Nginx configuration issue or something interfering from my application. So I create a whole new Nginx website just for CKEditor using bare bones very simple configuration that can't possibly mess anything up:

server {
    listen       80;
    server_name  cktest.com;
    root         /var/www/html/jscripts;
}

Then I set my /etc/hosts for cktest.com to point to localhost and give it a try. The same sample website comes up looking the same way and the same problem continues to happen with the CKEditor when I visit: http://cktest.com/ckeditor/samples/replacebyclass.html

Well...did my brain fall out of my head? Maybe I am working with the wrong ckeditor folder the whole time. So I renamed the ckeditor folder to ckeditor2. That gives me "404 Not Found", so I know I didn't trick myself into working with the wrong folder.

Ok, so maybe the CSS files didn't get extracted from any of my many installs that I tried:

/jscripts/ckeditor/skins/moono
ls
dialog.css      dialog_iequirks.css  editor_ie8.css       icons.png
dialog_ie7.css  editor.css           editor_ie.css        images
dialog_ie8.css  editor_gecko.css     editor_iequirks.css  readme.md
dialog_ie.css   editor_ie7.css       icons_hidpi.png

Looks like plenty of CSS files in there.

/jscripts/ckeditor
ls
adapters         ckeditor.js   lang        README.md  styles.js
build-config.js  config.js     LICENSE.md  samples
CHANGES.md       contents.css  plugins     skins

Lots of good files in there in ckeditor root.

The lang folder has lots of language files in it, including a good looking en.js file that I opened and didn't see anything weird going on.

/jscripts/ckeditor/adapters/jquery.js is there.

/jscripts/ckeditor/plugins
ls
a11yhelp     div              icons.png  magicline      showblocks   templates
about        find             iframe     pagebreak      smiley       wsc
clipboard    flash            image      pastefromword  specialchar
colordialog  forms            link       preview        table
dialog       icons_hidpi.png  liststyle  scayt          tabletools

I am not a ckeditor expert, but everything looks normal to me about the files. Nothing strange, no red flags.

Here is a total file count from my extracted "ckeditor_4.4.7_full.zip" that I installed:

/jscripts/ckeditor
find -type f | wc -l
356

Number of directories:

/jscripts/ckeditor
find -mindepth 1 -type d | wc -l
83

Total number of bytes in all files from the extracted "ckeditor_4.4.7_full.zip" that I installed:

/jscripts/ckeditor
du -shb ./
4039261 ./

I also tested this in Firefox and it is doing the same thing in that browser as well.

Does any of this make sense to you? What am I overlooking? What additional tests would you like me to try?

Thank you.

Update: I did notice in the console the faint warning Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://www.example.com/jscripts/ckeditor/samples/sample.css". So I added this to my nginx configuration inside of the server { section:

location ~ \.css {
    add_header Content-Type text/css;
}

location ~ \.js {
    add_header Content-Type application/javascript;
}

This did get rid of that warning so that I now have a blank console, but it did not solve the problem. CKEditor still comes up blank as before and the CSS of the sample pages do not decorate the page.