Web编程 订阅所有【Web编程】的日志

ASP.NET MVC3使用CKEditor+CKFinder示例

编辑:dnawo 日期:2013-01-02

字体大小: 小 中 大
CKEditor是一个文本编辑器，它的前身为FCKeditor。CKEditor不具备文件上传和管理功能，需要借助CKFinder来实现。

一、下载文件

CKEditor 4.0(ckeditor_4.0_standard.zip)：http://ckeditor.com/download
CKFinder.NET 2.3(ckfinder_aspnet_2.3.zip)：http://ckfinder.com/download

二、安装配置

1.安装CKEditor和CKFinder.NET

·解压ckeditor_4.0_standard.zip到/CKEditor文件夹下；
·解压ckfinder_aspnet_2.3.zip到/CKFinder文件夹下；

2.使用示例

Index.cshtml：
复制内容到剪贴板程序代码 程序代码
@model Web.Models.News
@{
    Layout = null;
}
<script type="text/javascript" src="/CKEditor/ckeditor.js"></script>
<script type="text/javascript" src="/CKFinder/ckfinder.js"></script>

@using (Html.BeginForm())
{
    <textarea id="Content" name="Content"></textarea>
    <button type="submit" name="submit">submit</button>
}
<script type="text/javascript">
    var editor1 = CKEDITOR.replace('Content');
    CKFinder.setupCKEditor(editor1, '/CKFinder/');
</script>

效果预览：





三、常见问题

问：怎么更改CKEditor工具栏中的按钮？
答：下边是一个简单的更改示例：
复制内容到剪贴板程序代码 程序代码
var editor1 = CKEDITOR.replace('Content', {
    toolbar: [          
        ['Bold', 'Italic', 'Format' ],
        ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
        ['Link', 'Unlink', 'Anchor', 'Image', 'Table'],            
        [ 'Maximize' ]
    ]
});

如果你想让这个配置在所有CKEditor中生效，可以将其放在/CKEditor/config.js文件中：
复制内容到剪贴板程序代码 程序代码
config.toolbar = [
        ['Bold', 'Italic', 'Format'],
        ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
        ['Link', 'Unlink', 'Anchor', 'Image', 'Table'],
        ['Maximize']
];

问：为什么CKEditor不能设置字体、大小和颜色？
答：CKEditor有三个版本：Basic、Standard和Full，经测试Full版中可以设置字体、大小和颜色。
复制内容到剪贴板程序代码 程序代码
config.toolbar = [
    ['Bold', 'Italic'],
    ['Font', 'FontSize'],
    ['TextColor', 'BGColor'],
    ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
    ['Link', 'Unlink', 'Anchor', 'Image', 'Table'],
    ['Maximize']
];

问：上传文件时提示"因为安全原因，文件不可浏览。请联系系统管理员并检查CKFinder配置文件。"
答：打开/CKFinder/config.ascx文件，修改CheckAuthentication方法，例如设置用户登录时可上传文件：
复制内容到剪贴板程序代码 程序代码
public override bool CheckAuthentication()
{
    return HttpContext.Current.Session["LoginUserInfo"] != null;
}

问：怎么修改CKFinder上传文件路径？
答：打开/CKFinder/config.ascx文件，修改SetConfig方法中的BaseUrl变量值即可，默认为"/ckfinder/userfiles/"。

问：为什么提交表单出错，提示从客户端检测到有潜在危险的 Request.Form 值？
答：在对应的Controller加上[ValidateInput(false)]即可。

上一篇: ASP.NET MVC3获取当前页面Controller和Action名称
下一篇: 使用EasyBCD恢复Ubuntu 12.04启动菜单示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 5317
发表评论
请登录后再发表评论！