山山未迟

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

image

 

image

和涛哥学习MVC项目四

目录

和涛哥学习MVC项目四... 1

一、在线文本编辑器... 3

1、在线文本编辑器使用场景... 3

2、文本编辑器分类... 3

1)ewebeditor:国产编辑器(收费)... 4

2)fckeditor. 4

3)ueditor(百度在线编辑器)... 5

4)kindeditor(可以实现响应式)... 5

5)ckeditor(最著名的文本编辑器)... 6

3、ckeditor的使用... 6

1)下载使用... 6

2)ckeditor历史... 7

二、ckeditor的使用... 7

1)参考示例文件... 7

第一种方式:通过制定textarea元素class选择器来载入在线文本编辑器... 8

第二种方式:通过替换指定的id选择器实现文本编辑器的载入... 8

第三种方式:通过jQuery的方式实现文本编辑器的载入... 9

三、ckeditor文本编辑器配置... 10

1、系统配置方式... 10

2、自定义文件修改方式... 11

3、接口函数修改方式... 12

三种配置方式比较:... 13

四、ckfinder的使用... 13

1、ckfinder下载地址... 13

2、文档解析... 13

3、ckfinder使用... 14

五、ckfinder配置... 15

1、文件上传路径配置... 15

2、缩略图配置... 16

3、上传图片配置... 16

4、用户权限配置... 16

5、配置上传文件类型... 17

6、更改文件上传路径... 17

7、中文乱码解决... 17

六、文本编辑器内容接收... 19

1、创建表单,并为textarea命名... 19

2、创建接收文件,由于文本编辑器内容会自带一些默认格式,所以请转义... 20

3、在数据库中创建字段类型为text文本类型... 20

4、在前台或后台使用该内容时请反转义内容... 20

5、ckeditor存储到数据库... 20

6、链接数据库,添加数据... 21

7、要用到的知识点... 21

8、视频插入... 21

七、整合文本编辑器到MVC项目中... 22

1、复制ckeditor与ckfinder到Public文件夹中... 23

2)在前台Public文件夹中创建uploads文件夹用于保存上传文件... 23

3)引入ckeditor接口文件与ckfinder接口文件... 23

4)设置文件上传路径... 24

5)更改ckeditor中的配置文件config.js或custom.js中调整路径,如下... 24

一、在线文本编辑器

1、在线文本编辑器使用场景

答:网站后台,OA系统,留言等功能

clip_image002

2、文本编辑器分类

那些年涛哥追过的文本编辑器

1)ewebeditor:国产编辑器(收费)

clip_image004

2)fckeditor

clip_image006

3)ueditor(百度在线编辑器)

clip_image008

4)kindeditor(可以实现响应式)

clip_image010

5)ckeditor(最著名的文本编辑器)

clip_image012

3、ckeditor的使用

1)下载使用

网址:http://ckeditor.com/,单机Download按钮,如下图所示

clip_image014

Basic Package:基础班,功能较少,体积较小,适合前台使用

Standard Package:标准版,具有常用功能

Full Package:完全版,具有系统的全部功能

2)ckeditor历史

fckeditor:文本编辑功能与图片上传功能整合在一个编辑器中,开源免费的

ckeditor:文本编辑器(只具有文本编辑功能),开源免费的

ckfinder:文件管理系统,收费的

二、ckeditor的使用

clip_image016

如果我们要使用ckeditor,那么一定要载入核心入口ckeditor.js文件

1)参考示例文件

clip_image018

第一种方式:通过制定textarea元素class选择器来载入在线文本编辑器

2)通过定义textarea class=”ckeidtor”来实现对ckeditor文本编辑器的调用,另外需要添加一个id或name的属性,如下图所示:

clip_image020

运行效果如下:

clip_image022

第二种方式:通过替换指定的id选择器实现文本编辑器的载入

clip_image024

运行效果如下:

clip_image026

第三种方式:通过jQuery的方式实现文本编辑器的载入

a)首先载入jquery.js源码文件

clip_image028

b)载入ckeditor.js入口文件以及适配器jquery.js文件

clip_image030

说明:a)中的jquery.source.js是jQuery源码文件

b)中的jquery.js是ckeditor为jquery提供的适配器接口文件

c)编写textarea文本域,并添加id为ckeditor的属性

clip_image032

运行效果如下:

clip_image033

三、ckeditor文本编辑器配置

1、系统配置方式

clip_image035

可以通过config.属性的方式来修改文本编辑器的配置信息,如下图所示

clip_image037

效果如下:

clip_image039

注:以上方式不推荐大家使用,因为当前的更改会影响到系统中所有文本编辑器的样式

2、自定义文件修改方式

在replace方法中,实际上存在第二个参数,要求是一个json对象,{},里面可以放多个属性,属性与属性之间可以通过,逗号隔开

clip_image041

通过以上方式调用自定义配置文件custom.js也可以实现对文本编辑器的配置

效果如下:

clip_image043

3、接口函数修改方式

直接在replace方法中更改样式

clip_image045

效果如下:

clip_image047

三种配置方式比较:

clip_image049

posted on 2016-04-22 23:27  山山未迟  阅读(369)  评论(0编辑  收藏  举报