CKEditor3.62+ASP.NET配置（图片存在指定文件夹，设置行间距）

来源：互联网发布：搜索引擎与数据库编辑：程序博客网时间：2024/05/22 04:50

1.ckeditor和ckfinder下载地址：http://up.2cto.com/2012/0306/20120306084548836.rar

解压后按目录ckeditor_aspnet_3.6.2/_samples打开：

打开文件为：

2.把ckeditor,ckfinder和bin文件夹粘贴到项目根目录中；

3.修改ckeditor中config.js文件：（绿色字体为可修改项，剩余的直接复制即可）

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

// config.language = 'fr';

config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');

//行间距（就在csdn上下一个插件:http://download.csdn.net/detail/biological2012/4974300，放在ckeditor/plugins中）

config.uiColor = 'gray'; //文本编辑器颜色(个人喜欢灰色)

config.language = 'zh-cn'; //语言（简体中文）

config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //字体

config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹

config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹

config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹

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

//上传文件按钮(标签)

config.filebrowserImageUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)

config.filebrowserFlashUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)

config.toolbar_Full =

[

['Source', '-', 'Preview', '-', 'Templates'],

['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],

['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],

['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

'/',

['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],

['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],

['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],

['Link', 'Unlink', 'Anchor'],

['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],

'/',

['Styles', 'Format', 'Font', 'FontSize','lineheight'], //行间距必须要加

['TextColor', 'BGColor'],

['Maximize', 'ShowBlocks', '-', 'About']

];

config.toolbar_Basic =

[

['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']

];

};

4.然后直接从工具箱拖入CKEditorControl控件并在〈head〉</head>标签中添加以下代码：

protected override void OnLoad(EventArgs e)

{

CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();

_FileBrowser.BasePath = "ckfinder/"; //控件路径

_FileBrowser.SetupCKEditor(CKEditor1);

CKEditor1.Height = 400; //控件的高度（编辑区域），config.js内设置无效

CKEditor1.Width = 830; //控件的宽度

}

</script>

5.将上传图片存在指定文件夹：

打开ckfinder/config.ascx文件，

在public override void SetConfig()方法中设置

BaseUrl = "~/";（假如你的图片放在根目录下的images文件夹中，这里就配置为："~/"；假如在根目录下的file文件的images文件中："~/file/"）；

type = ResourceType.Add( "Images" );

type.Url = BaseUrl + "images/"; //红色区域为图片所在文件夹名称

type.Dir = BaseDir == "" ? "" : BaseDir + "images/"; //红色区域为图片所在文件夹名称

OK！到此完毕！成功！

0 0