ckeditor4.5.1版本编辑器+ckfinder

本文介绍了如何在网站中整合CKEditor4.5.1标准版并结合ckfinder实现上传图片和链接文件的功能。包括下载、配置、引入相关DLL等步骤,以及详细的操作指南。

ckeditor的前身是FCKeditor。

目前介绍 ckeditor 4.5.1 Standard(标准版) 同时结合ckfinder 完成上传图片和上传链接文件;

一、CKEditor4.5.1 标准版

在ckeditor官网中http://ckeditor.com/download下载页面中选择 Standard Package 选项 进行下载;

解压后,文件夹复制到根目录下;

在想要添加编辑器的页面中 引用ckeditor目录下ckeditor.js, 

<script type="text/javascript">
 var editor=null;
    window.onload = function()
    {    
      editor=  CKEDITOR.replace( 'bz' ),{    };     
           };
</script>

div中添加   <textarea id="bz" runat="server" rows="30" cols="50" ></textarea>   如在不需要 上传图片和上传链接文件功能的情况下,这样编辑器已经可以正常运行显示了。

如需要上传图片和上传链接文件的功能,需在ckeditor官网中下载ckfinder ,解压后把ckfinder文件夹复制到和之前ckeditor在同一目录下。修改点击上传图片后预览区域显示内容 :在config.js中添加config.image_previewText='  ';需是空格不可为null的字符串 ,如果这样仍然显示的话,就需要在plugins/image/dialogs/image.js这里的image.js中进行删除修改了(具体删除哪里网上有),如不需要浏览服务器按钮,可是在iamge.js中修改(修改方法:查找搜索browseServer,找到该词第一次出现的位置,在后面修改, 添加/修改 dipaly:none属性);

在config.js中添加

filebrowserBrowseUrl = '/editor/ckfinder/ckfinder.html';//上传文件时浏览服务文件夹
    filebrowserImageBrowseUrl = '/editor/ckfinder/ckfinder.html?type=Images';//上传图片时浏览服务文件夹
    filebrowserFlashBrowseUrl = '/editor/ckfinder/ckfinder.html?type=Flash'; //上传Flash时浏览服务文件夹
    filebrowserUploadUrl = '/editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
    filebrowserImageUploadUrl = '/editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//上传图片按钮(标签) 
    filebrowserFlashUploadUrl = '/editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)

在项目中引用ckfinder中bin下的dll,如此可正确完成上传;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值