20150129--在线文本编辑器

20150129--在线文本编辑器

 

和涛哥学习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系统，留言等功能

2、文本编辑器分类

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

1）ewebeditor：国产编辑器（收费）

2）fckeditor

3）ueditor（百度在线编辑器）

4）kindeditor（可以实现响应式）

5）ckeditor（最著名的文本编辑器）

3、ckeditor的使用

1）下载使用

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

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

Standard Package：标准版，具有常用功能

Full Package：完全版，具有系统的全部功能

2）ckeditor历史

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

ckeditor：文本编辑器（只具有文本编辑功能），开源免费的

ckfinder：文件管理系统，收费的

二、ckeditor的使用

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

1）参考示例文件

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

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

运行效果如下：

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

运行效果如下：

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

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

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

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

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

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

运行效果如下：

三、ckeditor文本编辑器配置

1、系统配置方式

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

效果如下：

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

2、自定义文件修改方式

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

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

效果如下：

3、接口函数修改方式

直接在replace方法中更改样式

效果如下：

三种配置方式比较：

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

转载于:https://www.cnblogs.com/lifushan/p/5423225.html