CKEditor+CKFinder 解决上传图片路径问题

之前用的freetextbox可视化编辑器,一直解决不了上传图片到指定路径的问题,但是项目偏偏需要这个功能的,

无奈之下只有百般搜索,呵呵终于功夫不负有心人。CKEditor+CKFinder就解决了我的燃眉之急。

使用方法如下

CKEditor:

1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;

2.页面textarea:

< textarea  cols ='80'  name ='editor1'  rows ='10' ></ textarea >

CKFinder:

3.解压CKFinder到webRoot目录(最好与CKEditor同级) ;

4.页面script:(最好textarea之后)

 

ExpandedBlockStart.gif 代码
// <![CDATA[
    CKEDITOR.replace( ' <%=mckeditor.ClientID %> ' ,
{
    language:  ' zh-cn ' ,
    skin:  ' kama ' ,
    uiColor:  ' #9EBEF5 ' ,
    width:  ' 600 ' ,
    enterMode: Number( 2 ),
    shiftEnterMode: Number( 1 ),
    filebrowserBrowseUrl:  ' <%=ResolveUrl("~/ckfinder/ckfinder.html")%> ' ,
    filebrowserImageBrowseUrl:  ' <%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%> ' ,
    filebrowserUploadUrl:  ' <%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%> '
  });
// ]]> 

5、修改config.ascx文件中的BaseDir="d:\images\"(如果为空是相对路径,否则为绝对路径),BaseUrl = "/uploads/"(文件上传目录) 和CheckAuthentication()上传身份验证;

6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:

 


ExpandedBlockStart.gif 代码
CKEDITOR.editorConfig  =   function (config) {
// 配置默认配置
config.language  =   ' zh-cn ' // 配置语言
config.uiColor  =   ' #FFF ' // 背景颜色
 config.width  =   400 // 宽度
 config.height  =   400 // 高度
 config.skin  =   ' v2 ' // 编辑器皮肤样式
//
 取消 “拖拽以改变尺寸”功能
 config.resize_enabled  =   false ;
//  使用基础工具栏
 config.toolbar  =   " Basic " ;
//  使用全能工具栏
config.toolbar  =   " Full " ;
// 使用自定义工具栏
 config.toolbar  =
 [
 [
' Source ' ' Preview ' ' - ' ],
 [
' Cut ' ' Copy ' ' Paste ' ' PasteText ' ' PasteFromWord ' , ],
 [
' Undo ' ' Redo ' ' - ' ' Find ' ' Replace ' ' - ' ' SelectAll ' ' RemoveFormat ' ],
 [
' Image ' ' Flash ' ' Table ' ' HorizontalRule ' ' Smiley ' , SpecialChar ' , ' PageBreak ' ],
 
'/ ',
 [ ' Bold ' ' Italic ' ' Underline ' ' - ' ' Subscript ' ' Superscript ' ],
 [
' NumberedList ' ' BulletedList ' ' - ' ' Outdent ' ' Indent ' ' Blockquote ' ],
 [
' JustifyLeft ' ' JustifyCenter ' ' JustifyRight ' ' JustifyBlock ' ],
 [
' Link ' ' Unlink ' ' Anchor ' ],
 
' / ' ,
 [
' Format ' ' Font ' ' FontSize ' ],
[
' TextColor ' ' BGColor ' ],
 [
' Maximize ' ' ShowBlocks ' ' - ' ' About ' ]
 ];
};


转载于:https://www.cnblogs.com/TSPWater/archive/2010/06/04/1751307.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值