博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
php中ckeditor的配置方法
阅读量:4626 次
发布时间:2019-06-09

本文共 4047 字,大约阅读时间需要 13 分钟。

ckeditor 编辑器php正确配置方法

 

1. 下载安装 CKEditor:

解压下载到的CKEditor放到网站的路径中即可

2. 下载安装 CKFinder:

解压下载到的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.οnsubmit=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

 

转载于:https://www.cnblogs.com/lbs8/p/4344072.html

你可能感兴趣的文章
C++ RCSP智能指针简单实现与应用
查看>>
《java第二次实验》
查看>>
Oracle 高效分页
查看>>
全局变量及输出语句
查看>>
Wiz开发 定时器的使用与处理
查看>>
在Windows 7下面IIS7的安装和 配置ASP的正确方法
查看>>
PL SQL笔记(三)
查看>>
Python - 1. Built-in Atomic Data Types
查看>>
修改ecshop的100种技巧
查看>>
每天一个linux命令(33):df 命令
查看>>
2018/11/29 一个64位操作系统的设计与实现 02 (安装nasm)
查看>>
java 的回调函数
查看>>
dp uva1218
查看>>
Codeforces Round #308 (Div. 2) C. Vanya and Scales dfs
查看>>
大数据【四】MapReduce(单词计数;二次排序;计数器;join;分布式缓存)
查看>>
(转载)深入浅出设计模式——桥接模式(Bridge Pattern)
查看>>
Windbg双机调试环境配置(Windows7/Windows XP+VirtualBox/VMware+WDK7600)
查看>>
iOS 缓存策略
查看>>
异常处理
查看>>
BestCoder Round #65 B C D || HDU 5591 5592 5593
查看>>