080726 编辑器.docx

080726 编辑器.docx

《080726 编辑器.docx》由会员分享，可在线阅读，更多相关《080726 编辑器.docx（18页珍藏版）》请在冰豆网上搜索。

080726编辑器

回顾

水印:

文字水印（验证码）和图片水印

1.获取原图资源

2.获取水印资源

3.采样合并（imagecopymerge）

4.保存输出

5.销毁资源

MVC设计思想:

将数据显示,业务逻辑和数据处理进行分离

M:

Model,模型,操作数据

V:

View,视图,显示数据

C:

Controller,控制器,业务逻辑（调用模型和视图）

Session入库:

修改的session的运行机制

1.自定义6个函数（操作数据库）

2.修改session机制:

通过函数注册（session_set_save_handler）

3.Session开启会自动调用外部传入函数

在线编辑器

在线编辑器:

用户通过浏览器直接进行编辑,又叫所见即所得编辑器:

用户输入的内容（包含样式和图片等）就是用户最终看到的结果.

在线编辑器产品

在线编辑器有非常多的产品:

几乎所有的网站只要有文本编辑的地方都会用到在线编辑器.

常见的在线编辑器有:

FCK:

最早的在线编辑器:

FCK是开发人员的名字的缩写,是一款能够进行在线编辑,文件上传功能的js插件.

CK:

Contentandknowledge,是一款完全独立于FCK的一款在线编辑器:

CKEditor（在线编辑）和CKFinder（文件上传:

Ajax服务器文件管理器）

Kindeditor:

轻量级的在线编辑器

Ueditor:

XX旗下的在线编辑器

CK的优点

1.CK是一款比较成熟的在线编辑器

2.CK是一款重量级的在线编辑器:

各种功能都有

3.CK是一款兼容性相当好的软件

4.CK将在线编辑和文件管理进行了分离:

CKEditor是免费的,CKFinder收费

CKEditor

是一款专门用于在线笔记的js插件

安装ckeditor

1.获取安装软件:

建议去官网获取

2.下载标准版

3.解压缩

4.Js所谓的安装都不是真正的安全:

都是将js文件加载到html中:

将ckeditor文件夹移动指定的工作目录.

5.了解CKeditor的目录结构

使用ckeditor

CKeditor是基于HTML元素的编辑实现

HTML元素默认是不可编辑的,若想要实现编辑元素,必须使用元素属性:

contenteditable=true

在HTML中,仅有一个元素是可以直接数据标签而且有效:

textarea,ckeditor也是基于textarea实现.

CKeditor的加载有三种方式:

最简方式:

直接给textarea使用class的属性,其值固定为ckeditor:

CKeditor需要对textarea的外观进行修改:

需要获取到该元素:

要求元素必须有一个name或者id属性

基本方式:

CKEditor提供了一个”类”,本质是对象CKEDITOR,其下面有一个方法叫做replace（要替代的textarea）:

要替代的textarea可以是name也可以是id属性的值.

接口方式:

接口方式,ckeditor对外提供了操作接口,外部可以通过调用接口来实现:

jQuery（一种js框架）:

jQuery需要调用ckeditor给jquery提供的接口

加载三个文件:

jquery框架,ckeditor核心文件,ckeditor提供的接口文件

Jquery的接口对jquery提供了一个方法:

ckeditor（）

配置ckeditor

配置ckeditor:

使用ckeditor提供的配置方式对ckeditor的表现进行控制.

CKeditor提供了三种方式进行配置.

全局配置:

修改ckeditor的全局配置文件:

config.js

Config.配置项=值;//一旦配置:

所有使用当前的ckeditor的地方都生效

自定义配置:

用户自己单独新建一个配置文件,但是配置文件的内容与config.js是一样的,只是可以在里面进行修改:

然后在需要使用自定义配置文件的地方加载自定义配置文件

customConfig:

‘自定义配置文件的路径’;//只有标准模式和jquery模式可以使用自定义配置

Replace方法还是ckeditor方法:

都可以通过加参数{使用自定义配置}

$（‘元素’）.ckeditor（{customConfig:

‘配置文件的路径’}）;

1.自定义配置文件

2.加载配置文件

页内配置:

直接将配置项写入到某个具体的CKeditor内（只有标准模式和框架模式可用）,配置方式与加载配置文件customConfig:

‘路径’方式一样

三种配置方式的比较

全局配置:

一处修改,所有生效（全局性强）,不灵活

自定义配置:

修改不会产生任何影响,只有加载配置文件的才会受影响:

全局性较强,灵活性适中

页内配置:

只有修改的才会生效:

全局性最弱,最灵活

鉴于灵活性和全局性的影响,通常会使用自定义配置方式.

Ckeditor编辑入库

将ckeditor编辑的数据提交给数据库

给ckeditor对应的textarea增加一个表单包裹,和一个name属性

接收表单数据:

“模拟入库”

注意:

因为数据是用户输入的,可以输入任意数据:

有可能输入js数据:

为了保证js效果不会因为存储到数据库最后取出来变成真正的js代码执行:

需要将代码进行转义

保存数据:

htmlspecialchars,将html的特殊符号（标签）转换成实体符号如>====>>

取出数据:

htmlspecialchars_decod将html实体符号变回标签（特殊符号）>=====>>

CK将在线编辑和文件管理分成了两个部分:

在线编辑叫CKEditor,文件管理叫CKFinder

CKFinder

CKFinder是一款ajax文件管理器:

是一款用户可以在浏览器端管理服务器的文件的技术.

安装CKFinder

1.获取CKfinder:

建议去官网

2.下载CKFinder:

没有下载最新的,用2.4.2版本的

3.解压缩:

与CKEditor安装完全一样

4.了解CKfinder目录结构

使用CKfinder

CKfinder是完全可以独立使用的:

大部分的时候都是与CKEditor一起使用.

1.将CKfinder加入到CKeditor,使得图片（文件）操作可用:

在CKeditor的配置文件中,加载CKFinder:

当用户在CKeditor里面使用文件管理的时候,就会按照配置的路径寻找CKfinder的入口

2.加载后的效果:

当用户点击文件管理按钮,会出现文件管理器

默认的:

CKfinder是关闭了文件管理功能:

连上传都不能做

配置CKfinder

1.开放CKFinder文件管理权限:

修改CKFinder的配置文件

上传开放后的效果

但是路径是从网站根目录开始

2.配置文件上传目录:

修改服务器端的配置文件

上传效果

3.对上传文件进行分层配置:

修改服务器端的配置文件

上传效果

虽然文件上传的层级已经分了,但是中文上传会出现乱码:

4.修改文件上传的名字:

CKfinder没有提供重命名的机制:

修改源代码:

找到文件上传的文件所在位置

增加重名方法:

自创一个函数

在文件进行上传命名之前,使用新的名字

上传效果

默认的用户可以通过浏览器对服务器的文件进行任何操作

5.配置用户所拥有的权限:

上传+查看的权限

修改后的效果

6.修改显示上传图片窗口中的不认识的文字:

修改CKfinder里面的js

修改后的效果