在线编辑器的分类:

常见的在线编辑器有很多,比较常用的有FCKeditor(在线编辑器——Ajax 浏览器

端服务器文件管理器),CKeditor(在线编辑器与服务器端文件管理器的分离,)

其中CKeditor&CKfinder最为常用:

CKeditor:在线编辑器

CKfinder:服务器端文件管理器

CKeditor安装:

下载地址:http://www.ckeditor.com

CKeditor的安装很简单,只需要将文件解压,将CKeditor文件夹放到需要使用的项目位置即可。

CFeditor的目录结构:

使用CKeditor:

CKeditor:简单原理:我们知道,当前能够编辑html源码的表单元素只有textarea,因此在线编辑器的使用都是基于textarea。

怎么使用呢?

1.首先加载CKeditor文件夹中的ckeditor.js

2.界面中必须有一个textarea元素

3.将textarea替换成CKeditor编辑器

3.1最简单的方式:在textarea标签中增加一个class属性,值为CKeditor

3.2标准方式:使用CKeditor提供的类CKEDITOR,以及替换方法replace()。

<script>

  CKEDITOR.replace('myck1');//参数为id

</script>

3.3高级方式,使用jquery进行texarea替换

3.3.1 先加载jquery.js

3.3.2 加载ckeditor对jquery提供的接口文件jquery.js。 在/ckeditor/adapters/jquery.js

3.3.3 使用jquery替换textarea元素

<script>

  $('#myck1').ckeditor();//参数为id

</script>

注意:以上方式要求textarea元素必须有id或name属性

我们知道了怎么样使用,但有时,原始的样式不是我们期望的,这时就需要对ckeditor进行配置。

如何配置:

ckeditor提供了三种配置方式:

1.修改系统提供的配置文件config.js

例:config.配置项=值

config.width=500;

2.自定义配置文件,形式与系统配置文件config.js一致

2.1新建一个用户配置文件,格式和config.js完全一致

2.2修改配置选项同1

2.3在需要使用客户化的配置文件的ckeditor实例中加载客户定义的配置文件

注意:使用基础班的方式加载ckeditor无法使用客户化的配置文件

<script>

  CKEDITOR.replace('myck1',{customConfig:'config_user.js'});//参数为id,config_user.js是我们自定义的配置文件

</script>

优点:只有加载了客户化配置文件的ckeditor实例会受影响,其他的不收影响

3.in-page(页内)配置,在使用ckeditor的界面里进行配置

<script>

  CKEDITOR.replace('myck1',{

                  width:500,

                  height:200

                });//参数为id,

</script>

CKfinder安装同ckeditor

注意:CKfinder下载时需注意选择你所使用的语言的版本

CKfinder目录结构:

使用ckfinder:

要在ckeditor的配置项中加载ckfinder的使用(加载几个静态页,用户文件的管理)

1.在客户化配置文件中进行配置:

2.因为ckfinder默认是不允许用户上传文件的,所以没有权限进行文件上传,需修改配置文件

找到config.php来开放权限

找到CheckAuthentication()方法进行修改

3.修改文件上传路径

在config.php中找到$baseUrl进行修改

4.修改文件上传的目录结构

目录结构不能是单一的就在某个文件类型的文件夹下,应该适当的根据文件上传的量来确定文件夹的结构

如:年/月/日

在config.php中找到$config['ResourceType'][]数组,修改其中的url和directory元素。

5.文件在上传的过程中,如果文件名字是中文或者特殊字符,系统是没有办法进行处理的,上传之后会出现乱码,但是ckfinder没有提供重命名的机制,因此我们需要

修改源码

实现文件重命名:

5.1首先找到源文件路径

新增一个获取随机名字的函数

在哪里调用函数?如何用?

我们知道文件管理器可以在浏览器对服务器进行文件的增删改查,所以我们需要控制用户权限。

控制用户权限:

在config.php中找到$config['AccessControl'][]数组,进行修改

ckeditor编辑内容提交

1.增加form表单,textarea必须要有name属性

2.php接收请求进行处理

我们需要注意的是,因为里面有各种标签,所以在保存时我们需要对内容进行转义操作

$_POST['myck1']=addslashes($_POST['myck1']);之后再存入数据库

这样内容的结构就被改变了,数据再读取之后会影响在浏览器端的显示,

所以必须将内容再转回去进行输出

stripslashes($info);

以上即是ckeditor和ckfinder的基本使用。

在线编辑器CKeditor,CKfinder的更多相关文章

  1. 在线编辑器Ckeditor (1) - php (30)

    在线编辑器 在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结 ...

  2. 在线编辑器Ckeditor (2) - php (31)

    接上一篇 3 in-page(页内)配置,在使用Ckeditor的界面里进行直接配置 页内配置 效果 特点:配置项完全属于某个特定的Ckeditor实例,不可重用 三种配置方式比较 定制方式 特点 说 ...

  3. 1.文本编辑器-->CKEditor+CKFinder使用与配置

    一.CKEditor介绍 官网地址:http://ckeditor.com CKEditor下载地址:http://ckeditor.com/download CKFinder(免费版本)下载地址:h ...

  4. CKedit在线编辑器

    在线编辑器         在实现所见即得的编辑效果. FCK            是开发者的名字的缩写 CKEditor        功能很完善的,具有,在线编辑与图片上传JS插件 UEdit  ...

  5. .Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明

    Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...

  6. 网络编辑器插件ckeditor+ckfinder配置

    原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...

  7. CKEditor在线编辑器增加一个自定义插件

    CKEditor是一个非常优秀的在线编辑器,它的前身就是FCKEditor,CKEditor据官方说是重写了内核的,但功能和性能比FCKEditor更为强大和优越.记得07年的时候第一次接触FCKEd ...

  8. MVC5富文本编辑器CKEditor配置CKFinder

    富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  9. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

随机推荐

  1. tomcat日志文件目录修改

    tomcat每次启动时,自动在logs目录下生产以下日志文件,造成日志文件众多: 将logs的日志文件放置到新建的文件夹位置,避免主硬盘空间的占用.主要更改catalina.out的文件位置和每日的日 ...

  2. Linux 进程、线程运行在指定CPU核上

    /******************************************************************************** * Linux 进程.线程运行在指定 ...

  3. BZOJ4644: 经典傻逼题【线段树分治】【线性基】

    Description 这是一道经典傻逼题,对经典题很熟悉的人也不要激动,希望大家不要傻逼. 考虑一张N个点的带权无向图,点的编号为1到N. 对于图中的任意一个点集 (可以为空或者全集),所有恰好有一 ...

  4. 【C#】App_LocalResources实现多语言

    介绍 如果您创建的网页将由使用不同语言的用户阅读,则必须为这些读者提供用他们自己的语言查看网页的方法.一种方法是分别用各语言重新创建页面,但这种方法可能需要大量工作量.容易出错并且在更改原始页时很难维 ...

  5. 0302 IT行业就业与软件工程

    阅读以下文章 http://www.thea.cn/news/terminal/9/9389.html http://www.shzhidao.cn/system/2015/09/22/0102610 ...

  6. 使用defined和require引入js

    define(function(require, exports, module) { var ceshiTwo = { dataCeshi:[1,2,3,4,5], arrCeshi:functio ...

  7. streamsets redis destinations 使用

    测试集成了directory(excel) 以及redis && field splitter 组件 pipeline flow docker-compose 配置 redis 服务& ...

  8. html css 怎么使img和a标签在一个行内元素中间对齐

    答案是:#box ul.games li img{vertical-align: middle;} 这行很重要哦. <div id="box"> <div cla ...

  9. docker默认配置文件不存在问题解决

    Docker默认的配置文件/etc/default/docker或者/etc/sysconfig/docker都不起作用,查看了一下/lib/systemd/system/docker.service ...

  10. zipkin:mysql做存储,kafka做接收器,以及如何找到配置名称

    mysql设定 1. 创建表结构: (源码路径)\zipkin-storage\mysql\src\main\resources\mysql.sql 2. zipkin的存储设置为mysql(coll ...