MVC配置ckeditor+ckfinder

ckeditor当前使用版本:4.5.8

ckfinder当前使用版本:2.6.0

 

1.Ckeditor配置简单,直接使用Nuget下载就可

 

2.下载ckfinder

 

https://cksource.com/ckfinder/download

选择Asp.net版本下载并放在相同的目录下:‘Scripts'

 

3.添加js引用:

    @Scripts.Render("~/Scripts/ckeditor/ckeditor.js")
    @Scripts.Render("~/Scripts/ckfinder/ckfinder.js")

 

4.配置:

打开ckeditor目录下config.js文件如下配置:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.height = 400;
    config.skin = 'office2013';

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

打开ckfinder目录下的config.ascx文件配置两个地方

 

public override bool CheckAuthentication()
    {
        // WARNING : DO NOT simply return "true". By doing so, you are allowing
        // "anyone" to upload and list the files in your server. You must implement
        // some kind of session validation here. Even something very simple as...
        //
        //        return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
        //
        // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
        // user logs on your system.



 // return HttpContext.Current.User.Identity.IsAuthenticated; //登陆用户才能上传
return true; }
public override void SetConfig()
    {
// 上传文件的目录,这个目录必须有访问权限如:
        BaseUrl = "/Content/userfiles/";

 

5.把ckfinder目录中bin文件,复制到mvc项目中的bin目录中(好处是不用添加引用)

 

6.测试:

显示一个<textarea>

 <div class="form-group">
            @Html.LabelFor(model => model.Content, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Content, 100, 100, htmlAttributes:new { @class = "ckeditor"})
                @Html.ValidationMessageFor(model => model.Content, "", new { @class = "text-danger" })
            </div>
        </div>

 

 

posted @ 2016-04-06 01:16  wangbin5542  阅读(533)  评论(2编辑  收藏  举报