zoukankan      html  css  js  c++  java
  • 在ASP.NET MVC中使用CKEditor和CkFinder

    在你需要使用editor控件的页面头部添加:

    <head> 
    ... 
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> 
    </head>

     在页面相应位置上添加:

    <textarea name="editor1"></textarea>
    <script type="text/javascript">
    window.onload = function() { CKEDITOR.replace( 'editor1' ); }; 
    </script>

    注意:js代码一定要写在textarea后 其实可以这样理解editor控件只是对textarea做了一个漂亮的包装,我们的输入其实都在上面的texarea中,最终也是通过textarea 提交到服务器端。

    知道这些,服务器端代码就太简单了:

    [AcceptVerbs(HttpVerbs.Post)] 
    [ValidateInput(false)]
    public ActionResult Create(FormCollection collection) 
    
    {
          blog.Content = collection["editor1"]; 。。。 
    } 

    即可取得editor中的输入。这里需要注意的是由于textarea中有特殊字符,出于 安全原因,默认情况mvc框架不允许提交的,应在相应方法上加上[ValidateInput(false)]属性。

    加入CkFinder

    新的editor中去除了上传功能,也就是说我们不能通过上传插入图片、flash了。如图:editor中的插入图片对话框并没有提供上传功能:

    幸好有个插件ckfinder可以辅助我们完成以下功能,插件的下载地址同样在
    http://ckeditor.com/ 最新版本:ckfinder_aspnet_1.4.1.1


    解压后,得到一个名为ckfinder的文件夹,删除掉source、sample目录,拷贝到网站根目录下。

    注意:这里还有些配置必须要做:

    把文件夹中的bin目录下的dll文件添加到网站的引用中,防止出现找不到类的错误。
    打开config.ascx,修改

    public override bool CheckAuthentication()
        {
           reture false;//改为return true;
        }此处修改是为了有权限上传。

    接下来就要把ckfinder集成到ckeditor中了,代码如下:

    var editor = CKEDITOR.replace('editor1');
    CKFinder.SetupCKEditor(editor, '/ckfinder/');

    当然,在页面相应位置引用script代码是必不可少的。
    <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
    好了,最后一步了,由于ckfinder不是免费的,所以默认情况下会在上传页面中有红色的广告提示,虽然不影响使用,但总是觉得
    不爽。
    去除方法如下:

    找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js,将其中的en.call(window,qo);    代码注释或直接删除。

    至此我们的ckfinder全部配置完毕:

    补充:

    要自己配置eidtor的外观,可打开eidtor文件夹下的:config.js文件进行配置。

    CKEDITOR.editorConfig = function( config )
    {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    
    // config.width = 200;
    };

    此处配置是针对网站中所有页面的editor,如单个页面需要单独配置,直接在页面中写配置代码,示例如下:
    CKEDITOR.config.height = 400;

     

    在将CKFinder集成到CKEditor之前,我们还要对CKFinder进行一些配置。聪明的朋友应该很容易想到,既然是上传文件的插件,要配置的东西多半是上传文件的路径。

    CKFinder默认的上传路径是在其本身目录下的userfiles文件夹,不过,我已经将CKFinder放到CKEditor文件夹里了,要是把图片再存放到userfiles里面,系统就得绕过三层文件夹去找文件或图片了,于是,我打算将图片上传到项目根目录下的upFile文件夹里。要实现这一功能,需要修改CKFinder下的config.ascx文件,将BaseUrl = "/ckfinder/userfiles/"修改为BaseUrl = "~/upFile/"。然后,将CKFinder/bin文件夹下的CKFinder.dll文件剪切到系统项目的bin文件夹里。或者通过添加引用的方式,将CKFinder.dll引入到项目中。接下来,我们就可以使用带有文件上传功能的CKEditor了:

    把CKFinder文件夹放到CKEditor文件夹内,在页面中,引入两者的js文件:

    <script src="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascript"></script>

    <script src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascript"></script>

    至于将编辑器引用到控件上,网上有如下两种方法:

    一是使用客户端控件textarea:


    <textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>

    <script type="text/javascript">

    var editor = CKEDITOR.replace('txtContent');

    CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); 

    </script>

    二是使用服务器端控件textbox:

    个人觉得,既然是asp.net的程序,那就用服务器端的控件吧。尽管运行效率比客户端控件要慢一点,但开发效率要快一些。而且,作为程序员,我们总是喜欢是尝试所有的可能性,然后再选择自己喜欢的那一种。

    其实,这里也可以不使用Text='<%# Bind("info") %>'来对控件进行赋值,直接在后置代码中使用 

    this.txtContent.Text=”初始值”

        也是可以的。取值的时候,也可以直接使用如下代码:

     CKFinder和CKEditor 的代码。当我直接运行带有编辑器的页面时,编译器提示如下错误:

    string content= this.txtContent.Text

        注意:TextMode="MultiLine"属性必不可少,否则取到的将是空值。

    在调试程序之前,我没有精简

    命名空间“System.Web.UI.Design”中不存在类型或命名空间名称“ControlDesigner”(是缺少程序集引用吗?)

    出错的地方在ckeditorckfinder\_sourceFileBrowserDesigner.cs的第19行,于是,索性把文件精简一下:

    第一步,精简ckeditor :将 _samples、_source 文件夹删除,lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件;

    第二步,精简ckfinder:将 _samples、_source 文件夹删除,lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。

    这里请注意js代码的第二行:CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');,这里的“http://www.cnblogs.com/ckeditor/ckfinder/”是ckfinder与当前页面的相对路径,请大家不要直接复制粘贴代码,否则在上传图片时,可能会出现如下错误:

    说明: HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确。 

     请求的URL:  /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx

    我以为这样就算是做完了所有的工作了,但当我上传图片时,却又弹出了如下的提示信息:

    因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件。

    没办法呀,俗话说,好事多磨。我又只能去请教最好的老师——百度了。复制上面的提示信息到百度搜索框,回车后找到了一条关于PHP整合ckeditor的帖子,对比了一下,抱着试一试的心态,居然把这样问题解决了。方法是这样的:

    修改CKFinder下的config.ascx文件,将public override bool CheckAuthentication()函数的返回值由return false修改为return true。

    再次测试,图片上传成功!

  • 相关阅读:
    Angular实现数据绑定,它实现原理是什么?
    用angular实时获取本地localStorage数据,实现一个模拟后台数据登入的效果
    巨坑
    Hack 语言学习/参考---1.3 Summary
    Hack 语言学习/参考---1.2 Hack Background
    Hack 语言学习/参考---1.1 What is Hack?
    Hack 语言学习/参考---1.Hack 语言
    HHVM Installation and Configuration(HHVM 安装及配置)
    What is HHVM?
    Facebook HHVM 和 Hack 手册 --- 2. HHVM能做什么
  • 原文地址:https://www.cnblogs.com/smallerpig/p/3646188.html
Copyright © 2011-2022 走看看