CKeditor与 FCKeditor 编辑器 和PHP下配置安装举例
点击:1815
文字大小:
CKEditor是FCKEditor的新版，CKEditor更好用，更简洁。
官方的解释，CK是对FCK的代码的完全重写。
FCK配置方法：
在需要加入编辑器的页面里面引用fckeditor/fckeditor.php,即
在需要加入编辑器的地方加入如下代码：
$oFCKeditor = new FCKeditor( ' FCKeditor1 ' ) ; // 建立对象
$oFCKeditor -> BasePath = ' FCKeditor/ ' ; // FCKeditor所在的位置
$oFCKeditor -> ToolbarSet = ' Default ' ; // 工具按钮
$oFCKeditor -> Width = ' 50% ' ; // 宽
$oFCKeditor -> Height = ' 500 ' ; // 高
$oFCKeditor -> Value = ' Hello ' ; // 默认显示的文字
$oFCKeditor -> Create() ;
其中FCKeditor1对应textarea中的name属性
看看吧，不出意外的话配置成功。
如果你感觉FCKEditor提供的功能太多，有许多功能用不到的话，可以自己建立自定义的ToolbarSet具体方法就是打开fckediotr目录下的fckconfig.js,加入如下代码：
// 在名为"Default"的toolbarset里面包含了所有fck的功能，英语好的自己看看吧
FCKConfig.ToolbarSets[ " 自定义toolbarset名称 " ] = [ [需要显示的功能]]
CK配置方法：
http://ckeditor.com/
解压下载到的CKEditor放到网站的路径中即可
2. 下载安装 CKFinder:
http://ckfinder.com/download
解压下载到的CKFinder放到与CKEditor同一目录中即可
3. 在网页中使用 CKEditor 和 CKFinder:
CKEditor 实际是替换一个 textarea 标签，所以把textarea放到一个form中，当提交到php服务器端，使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意，因为 CKEditor 要替换 textarea，所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。
最简单的方法，直接新建一个test.html文件（和ckeditor、ckfinder处于同一级目录）使用下面的例子修改一下即可。在浏览器里浏览test.html就可以在网页中看到 CKEditor 了，兴奋吧。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body>
<form action="b.php" method="post">
<textarea name="editor1">CKEditor Demo</textarea>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
<script type="text/javascript">
// 启用 CKEitor 的上传功能，使用了 CKFinder 插件
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
</html>
4. 配置CKFinder进行上传图片，Flash等。
到这里，点击 "Image" 按钮，在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了，但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
a. 创建保存上传文件的目录，如upload
（把upload文件夹也放在和ckeditor、ckfinder处于同一级目录，三个目录都位于项目目录下）
其路径为 /upload/
[For Linux: 把其权限设置为php server可读写，最简单的是 chmod 777 upload 这样php server才有权限往里面保存文件.]
b. 找到配置文件（ckfinder/config.php）第32行，把 function CheckAuthentication() { return false; }
修改成 function CheckAuthentication() { return true; }
c. 找到第63行，把 $baseUrl 的值改成保存上传文件存目录的URL，
如 $baseUrl = '/项目名/upload/';（这里的地址要从项目目录开始的绝对路径，确定上传目录已经存在）
d. 找到第82行，删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径，（不能删除，否则不能上传）（本地测试的时候要从磁盘的跟目录下开始，即C:/或者D:/的直接目录）
如$baseDir = '/Apache2/htdocs/ck/upload/'; （Apache2是D:/盘下的直接目录）
这是因为resolveUrl($baseUrl)函数不能正常工作。
至此，可以使用 CKEditor 和 CKFinder 上传文件了。
对上面这个小例子中服务器端的b.php代码：
<?php
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor1'];
echo $str;
?>
可以看到，在点击submit按钮后，服务器端收到了CKEditor中的内容，并使用echo输出，生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。
来源：http://blog.csdn.net/shenx99/article/details/6981379
示例一:
(目录test下面包括：ckeditor目录文件夹 + test.html + a.php)
test.html>>>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>CKEditor</title>
<!-- 调用ckeditor ，ckfinder -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body>
<form name="myForm" action="a.php" method="post">
<textarea style="width:100px;height:100px" name="editor" id="editor1">CKEditor Demo</textarea>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
<script type="text/javascript">
//下面的'editor'就是上面的textarea的名称; 用CKEitor提供的方法直接获取textarea提交的内容
CKEDITOR.replace('editor1');
var f = document.myForm;
f.onsubmit=function(){
alert(CKEDITOR.instances.editor1.getData());
}
</script>
</html>
a.php》》》
<?php
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor']; //editor是提交过来页面的textarea的name名
echo $str;
?>
示例：与上面相同的文件，去掉alert代码；并分别从本地和互联上copy一些带有文件和图片的内容放到test.html中进行提交，发现：
本地的图片img标签：<img src="file:///c:/x/y.gif />
互联上copy的图片img标签：<img alt="" src="http://www.baidu.net/uploads/img/201007/18130009_BkZR.png" style="margin:0px" />
处理中文命名图片乱码=》
更改下面文件中的代码：
http://localhost/home/admin/ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php
个性化定义面板功能和属性：
1）直接在使用的地方用js调用；
2）或在http://localhost/home/admin/ckeditor/config.js 这个配置文件设置；
参考文档：http://docs.ckeditor.com/source/config.html#CKEDITOR-config
获得更多 -> 编程技巧 -> PHP技巧
责任编辑: webmaster >>> 百度上搜索 谷歌上搜索
点击复制本连接 （http://www.hugesky.com/showarticle.php?id=7029）
fckeditor编辑器在Chrome浏览器下默认多出空格解决技巧
Windows10用Win+X组合键无用的解决技巧| 【声明】： 以上文章或资料除注明为电脑技巧原创或编辑整理外，均为网络收集整理或网友推荐。以上内容以共享、参考、研究为目的，不存在任何商业目的。 未注明作者或出处的文章，可能资料来源不规范。如有涉及版权请给予及时联系更正或予以删除。 |
我问佛：如何才能如你般睿智？ 佛曰：佛是过来人，人是未来佛。
部分资源收集于互联网并遵循 署名-非商业性使用-相同方式共享3.0共享，尽量署名原创。
据《信息网络传播权保护条例》 如侵犯您的权利，请联系webmaster(at)hugesky.com删除。
Power By HugeSky.Com
Copyright© www.hugesky.com
Powered by HUGESKY CMS 7.1.1.1080918 professional licensed