CKEditor

时间:2015-06-11 12:34:23

标签: javascript css ubuntu nginx ckeditor

我遇到了一个有趣的技术问题,或许可能是其他人关注的问题。

首先让我解释一下我能成功做些什么。

在我的应用内部,我有一个textarea,我使用CDN成功转换为CKEditor。

以下是我为工作解决方案所做的工作:

<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>

有效!

但无论我向它扔什么,我都无法在我的服务器上安装CKEditor文件时安装它。您将看到我在故障排除方面非常彻底。

当我从zip文件和tar.gz文件中下载并安装完整的软件包或标准或基本版本或旧版本时,使用不同的实用程序进行提取(我已经尝试了所有这些),然后我用我服务器上的内容替换了js include文件:

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

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

我最终得到了一个很大的空白而不是我的textarea,它比CKEditor通过CDN工作时所取代的要大一些。没有javascript错误。实际上,当在控制台中查看DOM时,我可以看到CKEditor接管并且似乎正在做正确的事情。

然后我在浏览器中查看示例页面。同样的事情发生了。 CKEditor应该显示的大空格,但它不可见。但后来我发现了一些东西。在我的Chrome控制台内部,我会找到ID为#34; cke_editor1&#34;的div。并且.cdk(CSS类)可见性设置为隐藏。因此,我使用Chrome更改它以使其可见,然后我可以看到所有内容,但它被剥夺了所有的CSS。它显示了超链接而不是按钮等。此外,示例页面本身看起来很简单,Times New Roman字体,不漂亮。也许我遇到了CSS问题?

Chrome浏览器缓存杀手。缓存杀手。中间刷新很多次。不,不是浏览器缓存。

好吧那么,也许有些文件没有被完全访问,所以接下来我尝试将所有ckeditor文件的权限设置为777:

/jscripts
chmod -R 777 ckeditor

我检查并确认ckeditor中的每个文件现在都是777。同样的问题继续发生。

所以,我不知道,可能是Nginx配置问题或者是我的应用程序干扰了什么。因此,我为CKEditor创建了一个全新的Nginx网站,使用简单的配置,这可能会使任何事情变得混乱:

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

然后我将cktest.com的/ etc / hosts设置为指向localhost并尝试一下。同样的样本网站看起来也是这样,当我访问时,CKEditor会继续发生同样的问题: http://cktest.com/ckeditor/samples/replacebyclass.html

嗯......我的大脑是否脱离了我的脑海?也许我一直在使用错误的ckeditor文件夹。所以我将ckeditor文件夹重命名为ckeditor2。这给了我&#34; 404 Not Found&#34;,所以我知道我并没有欺骗自己使用错误的文件夹。

好的,也许CSS文件没有从我尝试的任何安装中提取出来:

/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

看起来有很多CSS文件。

/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

ckeditor root中有很多好的文件。

lang文件夹里面有很多语言文件,包括我打开的好看的en.js文件,并没有看到任何奇怪的事情。

/jscripts/ckeditor/adapters/jquery.js就在那里。

/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

我不是ckeditor专家,但对于我来说,文件的一切看起来都很正常。没什么奇怪的,没有红旗。

以下是我提取的&#34; ckeditor_4.4.7_full.zip&#34;的总文件数。我安装了:

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

目录数量:

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

提取的所有文件中的总字节数&#34; ckeditor_4.4.7_full.zip&#34;我安装了:

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

我也在Firefox中对此进行了测试,并且在该浏览器中也做了同样的事情。

这对你有意义吗?我在俯瞰什么?您希望我尝试哪些其他测试?

谢谢。

更新 我在控制台中注意到了微弱的警告Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://www.example.com/jscripts/ckeditor/samples/sample.css".所以我将其添加到server {部分内的我的nginx配置中:

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

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

这个做了摆脱了这个警告,所以我现在有一个空白的控制台,但它解决问题。 CKEditor仍然像以前一样空白,示例页面的CSS不会装饰页面。

0 个答案:

没有答案