zoukankan      html  css  js  c++  java
  • 20150129--在线文本编辑器-02

    四、ckfinder的使用

    ckfinder:在线文件管理器

    1、ckfinder下载地址

    网址:http://cksource.com/ckfinder

    2、文档解析

    clip_image002

    3、ckfinder使用

    a)复制ckfinder文件夹到与ckeditor同级项目目录

    如下图:

    clip_image004

    b)在ckeditor配置文件中,config.js或custom.js文件中,添加以下代码

    config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

    config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';

    config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';

    config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

    添加完成后,可以看到以下按钮

    clip_image006

    c)上传文件

    clip_image008

    由于默认情况下,ckfinder不允许文件上传,所以要修改系统配置文件

    clip_image010

    通过以上更改,可以完成对文件上传

    clip_image012

    五、ckfinder配置

    1、文件上传路径配置

    在ckfinder/config.php文件中,查找以下信息:

    clip_image014

    默认为ckfinder/userfiles

    2、缩略图配置

    clip_image016

    3、上传图片配置

    clip_image018

    4、用户权限配置

    clip_image020

    5、配置上传文件类型

    clip_image022

    6、更改文件上传路径

    clip_image024

    7、中文乱码解决

    当系统上传中文文件时,系统会产生乱码,而导致文件无法读取

    clip_image026

    原因:主要是由于系统采用原有文件命名上传文件,又由于ckfinder是老外编写的,所以对中文支持不好。

    更改上传图片名称,请到以下路径中去寻找

    clip_image028

    在文件底部定义生成随机文件名函数

    clip_image030

    打开文件,在82行代码,添加以下代码

    clip_image032

    效果如下:

    clip_image034

    六、文本编辑器内容接收

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

    clip_image036

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

    clip_image038

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

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

    clip_image040

    5、ckeditor存储到数据库

    数据库表设计

    clip_image042

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

    clip_image044

    7、要用到的知识点

    clip_image046

    说明:由于文本编辑器里面有很多格式设置会产生很多特殊字符,无法直接插入到数据库,所以必须要对其进行转义,但是在显示时,由于要显示原来的样式,所以可以通过以上函数进行反转义一个要显示的字符串。

    clip_image048

    8、视频插入

    以youku为例,打开要插入的视频地址,找到分享给好友

    clip_image050

    在文本编辑器的源码区域插入刚才复制的html代码,发现在点击回编辑页面,代码消失,所以可以判断ckeditor在新版中已经对html以及特殊标签进行了过滤

    修改ckeditor文件夹中的custom.js文件,添加以下代码:

    clip_image052

    保存退出

    效果如下:

    clip_image054

    说明:如是在手机端使用视频功能,建议使用腾讯视频或腾讯微视频来进行实现。

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

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

    clip_image056

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

    clip_image058

    原因:如上传到Admin文件夹下的Public/uploads文件中,那么我们的后台入口就完全暴露了。

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

    js代码

    clip_image060

    html代码:

    clip_image062

    4)设置文件上传路径

    打开ckfinder下面的config.php,找到63行代码,如下更改为/Public/uploads文件夹即可

    clip_image064

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

    clip_image066

    添加./Public头

    到止为止,大功告成!

  • 相关阅读:
    Git常用命令整理
    JavaScript常用代码书写规范
    程序猿常用英语单词汇总
    15个常用的javaScript正则表达式
    [Java复习] 服务注册中心 (Eureka, Zookeeper)
    [Java复习] 面试突击
    [Java复习] 面试突击
    [Java复习] 面试突击
    [Java复习] Spring Cloud
    [Java复习] 微服务
  • 原文地址:https://www.cnblogs.com/lifushan/p/5423232.html
Copyright © 2011-2022 走看看