码迷,mamicode.com
首页 > 其他好文 > 详细

CKedit在线编辑器

时间:2016-04-06 23:17:32      阅读:1216      评论:0      收藏:0      [点我收藏+]

标签:

在线编辑器????

????在实现所见即得的编辑效果。

FCK????????????是开发者的名字的缩写

CKEditor????????功能很完善的,具有,在线编辑与图片上传JS插件

UEdit????????????百度自己开发的一款在线编辑器

?

CKeditor安装

http://resource.ckeditor.com/

basic package????????基本安装包????????只包含了基本的功能

standard package????标准安装包????????包含更多的功能

full package????????完全安装包????????包含所有的功能

CKEditor在线编辑

安装

将安装包解压到项目目录:

技术分享

使用:

方法1:

简易方式

第1步:引入ckeditor.js主程序文件

技术分享

第2 步:将ckeditor.js应用到指定的textarea标签

技术分享

说明:

????class的值必须是ckeditor,必须有id或name属性,id或name属性的值可以任意

方法2:

基本方式

技术分享

方法3:

框架方式(jqurey),CKEditory,

Jquery就是使用JS封装好的一个框架,实现对标签对象的获取、绑定事件、简单的特效、css样式的操作

技术分享

配置:

1、全局配置

在ckeidtor/config.js

配置语法:

????config.配置项=值;

示例:

????config.width=500;

????config.height=300;

技术分享

2、自定义配置

需要自己创建一个配置文件(以config.js为模型)

技术分享

在需要使用此配置信息的textarea标签上引用此配置文件

此种方式只能被基本方式与框架方式使用

技术分享

3、代码方式

技术分享

?

<texteara>标签很特别:只有textarea能存其他的标签

?

在线编辑器的入库

ck.html

技术分享

后台文件receiver.php

技术分享

内容:

技术分享

出库

技术分享

ckfinder的安装

图片上传工具,应用于文件管理器。

????ckeditor将在线编辑 与图片上传的功能分享,形成了用于在线编辑(ckeditor)与图片上传(ckfinder)

下载并解压到项目目录(single)

加载ckfinder

在ckeditor的config.js配置文件中加载ckfinder

技术分享

效果:

技术分享

用户虽然可以选择上传,但是限制不足

技术分享

ckfinder目录结构

技术分享

在ckfinder的配置文件config.php中开始文件上传功能

技术分享

示例:

技术分享

默认的ckfinder把上传的文件保存在ckfiner/userfiles/images中。

更改保存目录

在ckfinder/config.php文件中

技术分享

上传测试

技术分享

分目录存储

在ckfinder/config.php文件中配置

技术分享

动态生成文件名

技术分享

在fileupload.php文件中首先动态产生文件名的函数

技术分享

使用动态产生的文件名,替换ckfinder中的默认保存的文件名

技术分享

测试效果

技术分享

ckfinder权限修改

默认ckfinder对文件管理是全部开放

在ckfinder/config.php中,进行修改

技术分享

?

技术分享

CKedit在线编辑器

标签:

原文地址:http://www.cnblogs.com/nyxd/p/5361437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!