• ckEditor + ckFinder


    牌编辑器FCK的升级版CKEditor经过重写,提

    供了丰富而强大的集成和互动的API。

    新版编辑器是完全基于插件,它可以扩展所有部件以符合需求。
    FCKeditor升级后的CKEditor去掉了上传功能,只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder来实现。 
    换句话说编辑器如果需要上传功能,就需要再下载CKFinder(http://www.ckfinder.com/)。

    CKEditor + CKFinder 配置流水账:

    CKEditor:
    1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
    2.页面textarea:

    [html]<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>;[/html]

    CKFinder:
    3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
    4.页面script:(最好textarea之后)

    [javascript]
    if (typeof CKEDITOR == ‘undefined’) {
    document.write(’加载CKEditor失败’);
    }
    else {
    var editor = CKEDITOR.replace(’editor1′);
    CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
    }
    [/javascript]

    整合:
    (把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
    5.打开\ckfinder\config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。

    至此配置完毕,如果需要自定义界面,可进行以下的高级修改:

    6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:

    [css]
    //字体.

    config.font_names = ‘宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;

    Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ;

    //工具按钮.

    config.toolbar=

    [

    ['Source','-','Save','NewPage','Preview','-','Templates'],

    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button',

    'ImageButton','HiddenField'],

    ‘/’,

    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

    ['Link','Unlink','Anchor'],

    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',

    'PageBreak'],

    ‘/’,

    ['Styles','Format','Font','FontSize'],

    ['TextColor','BGColor'],

    ['Maximize','ShowBlocks','-','About']

    ];

    //宽度

    config.width = 500;

    //高度

    config.height = 400;

    //皮肤

    config.skin=’v2′;

    //等等… …
    [/css]

    经过两天的摸索,终于搞定ckfinder的上传功能,特整理了实现的详细过程和大家分享下.

    本人机器系统 windowsxp sp3

    开发环境:vs2005 sql2000and2005   没有安装iis

    已经调试安装好了ckeditor3.0 , 下一步 我们来集成ckfinder 实现图片或者flash的上传功能。

    CKEditor 不具备上传功能,需要集成 CKFinder 才能实现上传功能。

    CKFinder 1.4.1.1 CKEditor 3.0.1 进行集成的配置方法:

    官方网站:CKFinder(powerful and easy to use Ajax file manager for web browsers)

    下载地址:CKFinder 1.4.1.1 for Asp.net(updated 02.10.2009

    1.下载 ckfinder_aspnet_1.4.1.1.zip 解压后将ckfinder(放在根目录下)。我的是开发网站的根目录,在根目录下同时还有ckeditor这个文件夹。

    2.拷贝ckfinder的bin目录下的CKFinder.dll到vs2005的bin目录下

    3.打开 " \ckfinder\config.ascx ",找到BaseUrl,可以看到BaseUrl = "/ckfinder/userfiles/";将其为BaseUrl = "~/ckfinder/userfiles/";
      // 注意“~
      // 以 userfiles 为默认路径,其目录下会自动生成images、flash等子目录。

    4、在 ckeditor/config.js 中集成 ckfinder。将以下代码复制到config.js中即可

    // 自定义 CKEditor 样式
    CKEDITOR.editorConfig = function(config) {
    ……

    CKFinder.SetupCKEditor(null, '../ckfinder/');// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
    }


    5、在 aspx 页面或者 master 模板页 <head> 标签中载入 ckfinder.js:

      <!-- 载入 CKFinder JS 文件 -->
      <script src="../ckfinder/ckfinder.js" type="text/javascript"></script>

     

      <!-- 使用 ckeditor 必须定义 class="ckeditor" -->

    本人新闻发布界面部分代码:

    <head runat="server">
        <title>新闻发布</title>
         <script language="javascript" type="text/javascript" src="../ckeditor/ckeditor.js"></script>
          <script language="javascript" type="text/javascript" src="../ckfinder/ckfinder.js" ></script>
    </head>

    本人用的是textarea控件 ,textbox也可以,自行研究~!

     在<body>标签中使用ckfinder:

    <textarea id="text1" name="editor1" class="ckeditor" runat="server" rows="10" style=" 640px" ></textarea>
                       
                          <script language="javascript" type="text/javascript" >
                         CKEDITOR.replace( 'editor1',
       {
        filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
        filebrowserUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
       }
    );


                          </script>

    注意:绿色的代码错误会导致上传文件时候一点击浏览服务器就产生乱码!


     
     常见错误排除方法:

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

    原因:未设置用户身份验证或者用户未登录

    解决办法

    到config.ascx中找到如下语句

    语句:
    public override bool CheckAuthentication()
    {
    reture false;
    }

     

    更改为:

    语句:
    public override bool CheckAuthentication()
    {
    reture true;
    }

    这样可以去掉身份验证,这样设置从安全性考虑并不好,但是我的目的是先调试能用!

    症状:未知错误

    原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。

    解决办法 检查BaseUrl是否修改为BaseUrl = "~/ckfinder/userfiles/";

    参考:http://hi.baidu.com/%B4%F3%CE%B0/blog/item/5f9ead517faadf858c543087.html

    http://blog.csdn.net/ishowing/archive/2009/09/24/4589950.aspx

    http://www.cnblogs.com/hudonglin/archive/2009/09/11/1564568.html

    http://docs.cksource.com/CKFinder/Developers_Guide/ASP.NET/CKEditor_Integration

    官方文档:
    http://docs.cksource.com/CKEditor_3.x/Developers_Guide
    http://docs.cksource.com/CKFinder/Developers_Guide

  • 相关阅读:
    android如何从网络中获取数据
    如何写好代码
    如何有效遍历集合中的对象
    Android中自定义控件
    Android如何从网络中获取图片
    如果对象的类型为T1,就做某件事;如果对象的类型为T2,就做另外一件事,请赏自己一个巴掌
    android如何在网络中获取数据
    android shell脚本使用
    ASP.NET应用程序
    php记住用户名和密码实现代码(cookie)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/1645072.html
Copyright © 2020-2023  润新知