ck编辑器(ckeditor)使用全攻略

http://www.php1.cn/article/9391.html

 

 

一.Ckeditor的使用

在线编辑器,种类繁多,里面最优秀的就是ckeditor,它的前身是fckeditor,09年正式更名ckeditor,

它的功能十分强大,可以满足我们的web开发需求。

Ckeditor是用js编写的,与后台编程语言无关。

如何使用ckeditor?

1. 获取ckeditor,

2. 创建页面,

我们的ckeditor是基于textarea,也就是我们首先要创建一个textarea。

3. 将ckeditor文件夹拷贝到我们相应的目录下。

4. 在页面中引入ckeditor,就是js的引用

ck引入

5. 在页面中使用ckeditor,实际上就是通过代码将textarea替换成在线编辑器。

ck对象创建

注意:尽量把这个代码写在form的后面。

6. 测试,能不能用,好不好用

 在后台,php这边,直接获取其内容,和原先没有变化

 在前端,用js如何来获取?

ck编辑器内容的获取

7. 测试是否可以提交已经格式化好的内容。分两种情况考虑

(1).直接在网上拷贝,(OK)

在线网络地址,

所以,只有你联网了,并且人家的服务器上的内容还在。

(2).原创,先写了一个word文档,(bad)

 

原因何在?

因为图片存在本地。所以,现在我们面临一个问题:就是如何上传图片?

其实在fckeditor中,它是具备上传图片功能的。但是再改版之后,一分为二,分成ckeditor和ckfinder。这是采用了面向对象思想:单一职责原则,分别让他们执行不同的功能。

二.Ckfinder的使用

Ckfinder,就是一个ajax的文件管理器

1. 下载

和ckeditor有所不同,ckfinder要和服务器交互,所以它有编程语言之分,我们在下载的时候要选择正确的版本。

2. 设计一个界面

ckfinder

3. 将ckfinder拷贝到相应的目录中,然后引入ckfinder文件

ckfiner

4. 书写js来完成上传功能 

ckfinder 

可以弹出这个窗口,但是现在提示:

ckfinder

这里需要更改下ckfinder的php配置文件。打开config.php文件,要改三个地方

1 . 更改权限设置

ckfinder

2. 先创建一个文件夹uploads,然后来设置其路径

php 博客

3. 设置绝对路径

php 博客

添加如下代码

php学习博客

在你选择图片之后,将url显示到文本框中。

对于中文名称的图片,会产生乱码。要解决

怎么办?

思路:对于中文名称的图片,我们可以将其进行更名。

在D:\wamp\Apache2.2\htdocs\cftest\ckfinder\core\connector\php\php5\CommandHandler当中,有一个文件fileupload.php,添加如下代码:

php技术博客

三.Ckeditor整合ckfinder

很简单,就是一个设置,代码特别麻烦,不要记,但要知道怎么来配。

1. 将ckfinder拷贝到和ckeditor在同一个目录中。

2. 创建一个uploads文件夹,

3. 更改ckfinder中的config.php,注意有三处要更改。

4. 修改fileupload.php文件,处理含中文名称的图片。

5. 在创建ckeditor的同时引入ckfinder。(这个几个可以在这个文件下找到:ckfinder\core\ckfinder_php5.php

 

//设置六个参数,完成ckfinder的引入
//文件浏览路径 实际上是通过这个文件间接的引入ckfinder.js
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"

关于配置,有几个都可以,四.个性化ckeditor,

 

  •  在config.js配置文件中可以进行配置。
  •  在创建ckeditor对象的时候可以配置。

posted on 2015-04-09 17:57  鬼鬼丫404  阅读(1969)  评论(0编辑  收藏  举报

导航