依照MVC4+EasyUI的Web开发框架经验统计(5)–使用HTML编辑控件CKEditor和CKFinder

3、集成效率展示

通过以上代码进行整合,在插入图片的操作页面里面,会增加一个浏览服务器按钮,上传操作选项卡等成效,方便对文本的浏览和上传操作,具体作用如下所示。

图片 1  图片 2

图片 3

上述就是自身在自我的Web框架之中整合的HTML编辑控件和CKFinder文件上传组件,这八个结合起来,可以丰富有利创设图文并茂的小说内容。

2、CKFinder的合并应用

固然如此CKFinder已经独自出来,不过它也提供了圆满的结缘职能,我们把它下载后,在压缩包里面的bin目录里面找到呼应的
ckFinder.dll,把它添加大家项目工程的引用里面去,大家才能正常使用文件上传成效。

接下来修改config.ascx文件之中的片段设置,使得大家可以得手使用。

第一步设置CheckAuthentication函数重返True。

    public override bool CheckAuthentication()
    {
                return true;
    }

其次步是设置SetConfig函数里面的BaseURL,那么些基础地址要求安装和我们项目的地点一样,否则上传文件有标题。

    public override void SetConfig()
    {
        // The base URL used to reach files in CKFinder through the browser.
        BaseUrl = "/Content/JQueryTools/ckfinder/userfiles/";

         ........................

其三步,整合CKFinder到CKEditor,后边说了CKEditor默许是没有公文上传的效劳操作的,必要添加CKFinder并开展配置才得以应用。

那步骤要求在CKEditor里面的config.js文件之中修改上面的布局参数(黑色部分就可以了)。

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

.......................

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

按照MVC4+EasyUI的Web开发框架的比比皆是文章:

基于MVC4+EasyUI的Web开发框架形成之旅–总体介绍

根据MVC4+EasyUI的Web开发框架形成之旅–MVC控制器的安排性

根据MVC4+EasyUI的Web开发框架形成之旅–界面控件的应用

据悉MVC4+EasyUI的Web开发框架形成之旅–附件上传组件uploadify的施用

基于MVC4+EasyUI的Web开发框架形成之旅–框架总体界面介绍

依照MVC4+EasyUI的Web开发框架形成之旅–基类控制器CRUD的操作

按照MVC4+EasyUI的Web开发框架形成之旅–权限控制

据悉MVC4+EasyUI的Web开发框架经验总括(1)-利用jQuery Tags Input
插件显示拔取记录

据悉MVC4+EasyUI的Web开发框架经验总括(2)-
使用EasyUI的树控件创设Web界面

基于MVC4+EasyUI的Web开发框架经验统计(3)-
使用Json实体类营造菜单数据

依照MVC4+EasyUI的Web开发框架经验总括(4)–使用图表控件Highcharts

按照MVC4+EasyUI的Web开发框架经验计算(5)–使用HTML编辑控件CKEditor和CKFinder

据悉MVC4+EasyUI的Web开发框架经验总括(6)–在页面中使用下拉列表的拍卖

基于MVC4+EasyUI的Web开发框架经验总括(7)–完结省份、城市、行政区三者联动

根据MVC4+EasyUI的Web开发框架经验统计(8)–达成Office文档的预览

根据MVC4+EasyUI的Web开发框架经验计算(9)–在Datagrid里面落成外键字段的转义操作

根据MVC4+EasyUI的Web开发框架经验统计(10)–在Web界面上完毕数量的导入和导出

据悉MVC4+EasyUI的Web开发框架经验统计(11)–使用Bundles处理简化页面代码

据悉MVC4+EasyUI的Web开发框架经验计算(12)–利用Jquery处理多少交互的三种方法

基于MVC4+EasyUI的Web开发框架经验统计(13)–DataGrid控件落成全自动适应宽带中度

基于MVC4+EasyUI的Web开发框架经验统计(14)–自动生成图标样式文件和图标的选料操作

 

1、CKEditor的使用

CKEditor的下载地址是http://ckeditor.com/download,里面能够依照必要展开体制的定制,本文主要介绍当前较新的版本4.4.1的后续使用。而CKFinder的下载地址是:http://ckfinder.com/download

CKEditor的拔取相比不难,一般景观下基于官方的指导拔取适宜的体裁下载就足以了,使用的时候,基本不要求什么修改配置文件。在MVC的视图页面里面,添加相关的引用文件就足以了。

    @*添加对ckeditor的支持*@
    <script src="~/Content/JQueryTools/ckeditor/ckeditor.js"></script>
    <script src="~/Content/JQueryTools/ckeditor/adapters/jquery.js"></script>

接下来在界面添加须要编制HTML内容的textarea控件,由于自己的应用的是EasyUI的控件,由此设置了控件样式class=”easyui-validatebox”,也得以随便那里。

                   <tr>
                        <th>
                            <label for="Content">内容:</label>
                        </th>
                        <td>
                            <textarea class="easyui-validatebox" id="Content" name="Content" style="width:1024px"></textarea>
                        </td>
                    </tr>

我们一般选择的时候,必要一段javascript脚本进行初叶化对应的控件,开始化代码如下所示。

    <script>
        function initEditor() {
            $('#Content').ckeditor();//控件1
            $('#Content1').ckeditor();//控件2
        }
    </script>

丰裕相应的脚本和控件开首化代码后,就可以在界面中展现出须求的作用了。

图片 4

而其后的控件使用,就和一般性的行使没有两样了,如赋值语句如下所示。

$('#Content1').val(info.Content);//ckeditor赋值

得到控件的值,也和一般给的同一

var content = $("#Content1").val();

4、MVC的处理

此地要求留意的是出于textarea中有特殊字符,出于安全原因,默认景况mvc框架不允许提交的,应在对应措施上添加[ValidateInput(false)]属性。

如本人为着提交HTML内容,需求在控制器对象里面,重写了情节的写入和更新操作函数,如下所示。

        [ValidateInput(false)]
        public override ActionResult Insert(InformationInfo info)
        {
            info.Editor = CurrentUser.Name;
            info.EditTime = DateTime.Now;

            return base.Insert(info);
        }

        [ValidateInput(false)]
        public override ActionResult Update(string id, FormCollection formValues)
        {
            return base.Update(id, formValues);
        }

一经对那个种类的别样情节总括有趣味,也得以看看下边的连接:

Web开发上有很多HTML的编制控件,如CKEditor、kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的安顿和使用。CKEditor的前身是FCKEditor,随着它的翻新,上传图片的作用被分手出来了,现在一旦急需贯彻上传图片,要么自己写代码或者应用其余上传控件(如Uploadify),还有一种办法是使用CKFinder,那两边的联结使用,能给大家带来越多的福利。