• CKEditor+CKFinder的图片上传配置


    CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程)

    php

    keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还需要下载ckfinder。

    首先去官方上下载源代码,然后分别解压缩在网站根目录里(默认ckeditor和ckfinder文件夹里,一般不需要改动)

    在所需要的页面插入JS

    <script type=”text/网页特效” src=”/ckeditor/ckeditor.JS”></script>

    <script type=”text/javascript” src=”/ckfinder/ckfinder.js”> </script>

    <form action=”Sroan.php” method=”post”>

    <textarea  cols=”80″ id=”editor1″ name=”editor1″ rows=”10″></textarea>

    <input type=”submit” value=”Submit” />

    <script type=”text/javascript”>
    var editor = CKEDITOR.replace(‘timu’);
    CKFinder.SetupCKEditor(editor, ‘../ckfinder/’); //ckfinder总目录的相对路径.
    </script>

    再修改ckfinder/config.php 里CheckAuthentication函数,返回改为ture(默认为fasle)

    这样就能够实现上传功能了。


    如果上面的方法不行可以试一下


    1. 下载安装 CKEditor:
    http://ckeditor.com/
    解压下载到的CKEditor放到网站的路径中即可
    2. 下载安装 CKFinder:
    http://ckfinder.com/download
    解压下载到的CKFinder放到与CKEditor同一目录中即可
     
    3. 在网页中使用 CKEditor 和 CKFinder:
    CKEditor 实际是替换一个 textarea 标签,所以把textarea放到一个form中,当提交到php服务器端,使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意,因为 CKEditor 要替换 textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。
    最简单的方法,直接新建一个test.html文件(和ckeditor、ckfinder处于同一级目录)使用下面的例子修改一下即可。在浏览器里浏览test.html就可以在网页中看到 CKEditor 了,兴奋吧。
     
     
     
     
       CKEditor
     
     
     
     
     
    4. 配置CKFinder进行上传图片,Flash等。
     
    到这里,点击 "Image" 按钮,在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了,但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
    a. 创建保存上传文件的目录,如upload
    (把upload文件夹也放在和ckeditor、ckfinder处于同一级目录,三个目录都位于项目目录下)
    其路径为 /upload/
    [For Linux: 把其权限设置为php server可读写,最简单的是 chmod 777 upload 这样php server才有权限往里面保存文件.]
     
    b. 找到配置文件(ckfinder/config.php)第32行,把 function CheckAuthentication () { return false; }
    修改成 function CheckAuthentication() { return true; }
     
    c. 找到第63行,把 $baseUrl 的值改成保存上传文件存目录的URL,
    如 $baseUrl = '/项目名/upload/';(这里的地址要从项目目录开始的绝对路径,确定上传目录已经存在)
     
    d. 找到第82行,删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径 ,(本地测试的时候要从磁盘的跟目录下开始,即C:/或者D:/的直接目录)
    如$baseDir = '/Apache2/htdocs/ck/upload/'; (Apache2是D:/盘下的直接目录)
    这 是因为resolveUrl($baseUrl)函数不能正常工作。
     
    至此,可以使用 CKEditor 和 CKFinder 上传文件了。
     
    对上面这个小例子中服务器端的b.php代码:
     
     
    header("Content-Type:text/html; charset=utf-8");
    $str = $_POST['editor1'];
    echo $str;
    ?>
     
    可以看到,在点击submit按钮后,服务器端收到了CKEditor中的内容,并使用echo输出,生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库教程中。然后再读出在相应的页面显示出来。

    ---------------------------------------------------------------------------------------------------------

    fckeditor的上传图片中,有一个可以浏览服务器目录的功能,如果在后台,是可以开放使用的,如果是前台用户访问就不要使用这个功能。
    不过浏览图片不是很方便,ckfinder 就很好的简单了这个问题
    fckeditor的配制如下:
    修改文件:
    fckeditoreditorfilemanagerconnectorsphpconfig.php

    // $Config['Enabled']改过true,允许上传

    $Config['Enabled']=true;

    //$Config['UserFilesPath'] 设置相对于根目录的上传目录,目前来说没有用,因为实际上传在下面的配制中

    $Config['UserFilesPath'] = "/upload/";

    //$Config['UserFilesAbsolutePath']  上传的图片位置,包括根目录

    $Config['UserFilesAbsolutePath'] = '/public/upload/' ;

    设置ckfinder的config.php

    $baseUrl = '/upload/';

    // 在CheckAuthentication 改为return true,这里可以加入自己的权限判断。

    function

     CheckAuthentication()

     {

          return true;

    }

    程序代码中使用

     $fckeditor= new FCKeditor($fckname) ;

     $fckeditor->BasePath = '/js/fckeditor/' ;

    //$toolbar_set 设置工具栏 默认值: Default

     $fckeditor->ToolbarSet = $toolbar_set; 


    // $width 宽度

     $fckeditor->Width  = $width; 


    // $height 高度 

     $fckeditor->Height     = $height;

    //皮肤文件的路径

     $fckeditor->Config      =  array('SkinPath'=>$SkinPath);

     $fckeditor->Value      = $value;

    //在fckedior这前使用CKFinder


     CKFinder::

    SetupFCKeditor

    (

     $fckeditor, "/js/ckfinder/"

    ) ;


     $fckhtml = $fckeditor->Create() ;

    下面为详细的c#配置方法

    CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得。
    把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大小写)
    在页面使用 CKEditor:
            <textarea cols="80" id="prcontent" name="content" rows="50">hello world!</textarea>
            <script type="text/javascript">
                CKEDITOR.replace('content', { height: 200, 520 });
            </script>
    CKEditor 本身不自带上传功能,所以需要配合CKFinder才可以实现上传
    第一步:网站需要引用CKFinder的dll(目录:/CKFinder/bin/Release/CKFinder.dll)
    第二步:配置CKEditor的config.js (目录:/CKEditor/config.js ) 在CKEDITOR.editorConfig函数里加上,不需要的功能可以去掉
        config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
        config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
        config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹
        config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
        config.filebrowserImageUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
        config.filebrowserFlashUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)
    配置完成后CKEditor 就带有上传功能了,但假如上传图片时,图片的文件是用原来图片的名字,想改为随机文件名呢,怎么办?接着看第三步。
     
    第三步:修改CKFinder的源码。CKFinder自带有源码,目录:/CKFinde/_source
    在VS里新建一个 现在的项目 指向CKFinde/_source/CKFinder.Net.sln
    1) 打开/Settings/ConfigFile.cs文件
    定位27行,添加一个属性:public bool RandomReName; //随机重命名
    定位67行,给刚才的属性赋值:RandomReName = true; //默认值为true
    保存关闭文件
    2) 打开/Connector/Config.cs文件
    定位62行,添加一个属性:
            public bool RandomReName
            {
                get { return Settings.ConfigFile.Current.RandomReName; }
            }
    保存关闭文件
    3) 打开/Connector/CommandHandlers/FileUploadCommandHandler.cs文件
    定位64行,添加一句判断代码:
                            if ( Config.Current.RandomReName)  //使用随机名
                                sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;

    保存关闭文件
    4) 重新生成项目,把/ckfinder/_source/bin/Debug/CKFinder.dll覆盖/ckfinder/bin/Release/CKFinder.dll或者网站项目去掉之前加入的引用再重新从CKFinder.Net项目里的Dll
    最后一步:打开/ckfinder/config.ascx
    定位42行,添加一属性:(其实这个加不加都可以的,因为之前有设置默认值,但使用原名时一定要设置为false)
            //上传完毕后使用随机文件名
            RandomReName = true;

    保存关闭
    好了,到此已经配置成功了,CKEditor 可以有上传功能了。其它的功能的设置,有空再继续研究~
    还要提醒一句:CKEditor 和 CKFinder 文件夹里有很多不需要的东西,例如名字带有下划线前辍的,.net项目不需要php,asp的。
    如果上传文件出现错误:因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
    需要修改config.ascx文件中
    public override bool CheckAuthentication()
    {
    reture false;
    }
    修改为:
    public override bool CheckAuthentication()
    {
    // 窗体验证时用
     return Request.IsAuthenticated;
    //reture true; 不推荐使用
    }

  • 相关阅读:
    springboot运行在eclipse报异常的问题
    Python random模块
    MySQL大小写敏感
    正则表达式详解
    Linux grep命令详解
    Linux printf命令详解
    Linux awk命令详解
    MySQL表介绍
    Linux sed命令详解
    Linux grep命令详解
  • 原文地址:https://www.cnblogs.com/ajunForNet/p/2538560.html
Copyright © 2020-2023  润新知