CkEditor文本编辑器配合ckfinder上传功能在.net中的使用步骤

1．官网下载ckeditor: http://ckeditor.com/download 本文使用Version：CKEditor 3.6.4 for ASP.NET, Released 8 Aug 2012

2．选择_Samples目录下面的ckeditor，删除 CHANGES.html、INSTALL.html、LICENSE.html后，把整个ckeditor复制到网站根目录下面的 js目录下面

3．使用：引入ckeditor.js文件，在页面添加TextBox服务器文本框，并设置CssClass=”ckeditor” TextMode=”MultiLine”或者使用textarea：如

<script src="/js/ckeditor/ckeditor.js" type="text/javascript"></script>
<asp:TextBox CssClass="ckeditor" TextMode="MultiLine" ID="txtContent" runat="server"></asp:TextBox>
<textarea id="_ckeditor" name="_ckeditor" rows="2" cols="20" class="ckeditor"></textarea>

4．至此，就可以看到基本效果了，但是 asp.net默认情况下，不允许提交包含html源代码的表单，这在很大程度上防止了跨站(提交)攻击，但是ckeditor/fckeditor之类的富文本编辑器肯定是要生成html源代码的，因此通常的办法是修改web.config
asp.net2.0/3/3.5时可以这样做:<pages validateRequest="false"></pages>
asp.net4.0，这样还不够，必须写成这样: <pages validateRequest="false"></pages> <httpRuntimerequestValidationMode="2.0"/>
这样虽然解决了问题，但是同时也降低了安全性，因此使用以下思路：
客户端--表单中增加一个隐藏控件，提交时先把ckeditor的内容用url编码后，赋值给该隐藏控件，然后清空ckeditor的值。
服务端--接收该隐藏控件的值做为ckeditor的内容，同时接收时先url解码。

具体完整代码如下：

javascript部分：

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        //点击提交时
        function onSubmit(btn) {
            //CKEDITOR.instances.后面为使用classc="keditor"的控件的id
            var editor = CKEDITOR.instances._ckeditor;
            $("#txtContent").val(CKEDITOR.tools.htmlEncode(editor.getData()));
            //清空ckeditor，否则仍然会提示错误
            editor.setData("");
        }
    </script>

html部分：

        <textarea id="_ckeditor" name="_ckeditor" rows="2" cols="20" class="ckeditor"></textarea>
        <asp:TextBox ID="txtContent" Visible="false" runat="server" />
        <asp:Button ID="btAdd" Text="提交" OnClientClick="return onSubmit(this);" OnClick="btAdd_Click" runat="server" />

后台取值：

            string s = HttpUtility.HtmlDecode(txtContent.Text.Trim());

此法虽然绕过了系统默认的安全防御，很容易被提交恶意代码，所以在服务器端还需要进行安全的验证。

6.上传功能

6.1 官网下载CKfinder http://cksource.com/ckfinder/download 本文使用 ckfinder_aspnet_2.4

6.2 删除CKFinder文件夹中的_source文件夹、 _sample文件夹、changelog.txt、install.txt、license.txt、translations.txt，把整个ckfinder复制到网站根目录下面的 js目录下面

6.3 打开“ckeditor\config.js”文件，在CKEDITOR.editorConfig = function (config) { 下面添加配置文件

    //使用ckfinder上传功能
    //CKFinder.SetupCKEditor(null, '/js/ckfinder/'); //注意ckfinder的路径对应实际放置的位置
    var dir = "/js";
    config.filebrowserBrowseUrl = dir + '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
    config.filebrowserImageBrowseUrl = dir + '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
    config.filebrowserFlashBrowseUrl = dir + '/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹
    config.filebrowserUploadUrl = dir + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
    config.filebrowserImageUploadUrl = dir + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
    config.filebrowserFlashUploadUrl = dir + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)

秒客网

CkEditor文本编辑器配合ckfinder上传功能在.net中的使用步骤

相关文章