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之后)

代码
//<![CDATA[
    CKEDITOR.replace('<%=mckeditor.ClientID %>',
{
    language: 'zh-cn',
    skin: 'kama',
    uiColor: '#9EBEF5',
     '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里加入以下需要自定义的配置代码:
代码
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/p/1751307.html