zoukankan      html  css  js  c++  java
  • ckeditor、ckeditor配置--整合

    1.将ckeditor和ckfinder文件夹拷入项目文件夹中,刷新项目。

    2.ckfinder把文件夹中的bin目录下的dll文件(CKFinder.dll)添加到网站的引用中,防止出现找不到类的错误。(未能加载类型“CKFinder.Connector.Connector”。)

    3. 在添加编辑控件的页面(aspx)的head中加入,并插入代码:

      <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
        <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
    
        <asp:TextBox ID="i_content" runat="server" TextMode="MultiLine" Height="362px"
                    Width="100%"></asp:TextBox>
        </div>
    
    <script type="text/javascript">
            CKEDITOR.replace('<%= i_content.ClientID %>', {skin : 'kama'});
    </script>

    <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
    
    <textarea cols="80" id="txtremark" rows="50" runat="server"></textarea>
    
    <script type="text/javascript">
                CKEDITOR.replace('txtremark', { height: 250,  800 });
    </script>

    4.在项目文件夹中加入uploads文件夹来存放上传的文件

    5.修改页面的page指令ValidateRequest="false"
    <%@ Page Language="C#" ValidateRequest="false" %>

    7.获取或设置编辑器中的内容
    //获取编辑器中的内容
    lblView.Text=Server.HtmlEncode( this.i_content.Text);
    //设置编辑器中的内容
    txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");

    //获取编辑器中的内容

    model.Remark = this.txtremark.Value;

    //设置编辑器中的内容

    this.txtremark.Value = model.Remark;


    一些用应中(如ajax应用)需要在客户端处理完所有的数据,然后用它自己的方式向服务器发送数据,在这些情况下,使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如: <script type="text/javascript">
    var editor_data = CKEDITOR.instances.i_content.getData();
    </script>

    8.加入中文字体:

    打开CKeditor目录里的config.js,在

    CKEDITOR.editorConfig = function( config )
    {

        config.language = 'zh-cn'; //中文
        //  config.uiColor = '#AFEEEE';//编辑器颜色
        config.font_names = '微软雅黑;宋体;楷体_GB2312;新微软雅黑;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
    };

    9.修改文件上传目录

    打开ckfinder目录里的config.ascx

    修改例如:

    BaseUrl = "/uploads/";

    BaseDir = Server.MapPath("~/uploads/");

    点击下载ckeditor、ckeditor

    最新版本下载

    http://ckeditor.com/download

    http://ckfinder.com/download

    CKEditor我下载的是3.6.4,CKFinder下载的是2.3 for ASP.NET,首先解压所有的文件,然后将ckeditor和ckfinder文件夹放到网站的目录下,可以删除ckeditor和ckfinder文 件夹下的_samples、_source 文件夹,将CKFinder.dll添加到站点的bin/文件夹中,然后在网站页面头部添加js的引用,具体路径根据自己放置的路径设置,如下:

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

    在页面中添加一个textarea,具体代码如下:

    <textarea name="individual" id="individual" runat="server"></textarea>
    <script type="text/javascript">
        CKEDITOR.replace('individual');
    </script>

    接下来打开ckeditor文件夹下的config.js文件,在CKEDITOR.editorConfig = function (config) {};方法中添加如下代码:

    config.filebrowserImageBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Images';
    config.filebrowserFlashBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Flash';
    config.filebrowserUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
    config.filebrowserWindowWidth = '800';  //“浏览服务器”弹出框的size设置
    config.filebrowserWindowHeight = '500';

    上面的路径也需要根据自己的设置。

    然后打开ckfinder文件夹下面的config.ascx文件,为了所有的人都能看到服务器上上传文件夹里面的文件,将函数public override bool CheckAuthentication返回值改为true,其实也可以根据自身网站的安全需要去更改代码,这里只是为了简单实现,代码如下:

    public override bool CheckAuthentication()
        {
            // WARNING : DO NOT simply return "true". By doing so, you are allowing
            // "anyone" to upload and list the files in your server. You must implement
            // some kind of session validation here. Even something very simple as...
            //
            //        return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
            //
            // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
            // user logs on your system.
    
            return true;
        }

    并且在public override void SetConfig()方法中找到BaseUrl,这个即为存放上传文件的路径,根据自己的网站进行更改。

    CKFinder 2.0.2.1破解,去掉demo

    一、关于CKEditor 如何配置 以及 和 CKFinder 如何配合使用就不在这里做介绍了。网上的例子也很多。或者等在下有时间了再补充这一部分。

    二、我使用的版本:

            CKFinder :2.0.2.1

    三、破解办法:

           1、解决左下角树形目录上的demo

    打开ckfinder.js 找到:

    p="x3c144x69x7640143x6cx61163x7375x27166x69x65x7740x74x6f157154137160141x6e1451544740x73164x79154x657547x64x69163160x6c141x79x3a40142154x6fx63153x2041151155160x6f162164141156164x3b40160157163x69x74x69157x6ex3a40163164x61164x69143x20x21x69x6d160157x72x74141156164x3bx20x63157154x6fx72x3ax20x62x6c141x63153x2041x69155160157x72164141x6ex74x3bx20x62141x63153147162x6f165x6e14455x63157154x6fx727240x77x68x69164145x2041151x6dx7015716216414115616473x27x3ex54150151163x20151x73x20x74150x65x20x44x4511511740x76145162163151x6fx6e40x6fx66x20x43113x46x69x6e144x65x72x2e40x50154145141x73x6540166151163x69x7440x74x68x6540x3cx61x20150162145x6675x27x68164x74160x3a5757143153146x69156x64x65x72x2e143157x6dx27x20164x61x72x67x6516475x2713714215414115615347x3e103113106151x6ex64145162x20x77x6514240x73151x7414574x2f141x3ex2016415740157x62x74x61151x6ex20x61x20x76x61154151144x20x6c151x63x65x6e163145x2e7457144x69x7676"

    修改为:

    p="x20" 或 p=“ ”  不能为空

     

    2、解决文件列表上方的demo

    打开ckfinder.js 找到:

     

    if(!t)this.dV().aC(0).appendHtml(p);

    将其删除掉。

    再找:

    if(N.files.length)N.fa=G;

    这个不要删除,删除后就会出现“空文件夹” 提示。  把其修改为:

    if(N.files.length)N.fa=''; 便可以。

     

    至此,以全部破解成功。。。。。。。。。。。。。。

    如果觉得该JS文件太大,可以再按下放提示,进行修改:

     

    a、找到:

    F="x50x6c145141x73x6540166151163x69164x20x74x6814540x3cx61x20150162145x66x3dx27150x741641607257x2f143x6bx66x69x6ex641451625614315715547x20x74141x72147145x747547137x62x6c141156x6bx2776x43113106151x6e144x6516240x77145x62x20163151164x6574x2f141x3e40164x6f40x6f142x74141x6915640x61x20x76141x6cx69x6440x6cx69143x65x6e163x6556"

    将其修改为  F=“x20”

    其实 F翻译过来的内容就是:F=” Please visit the CKFinder web site to obtain a valid license.”

     

    b、找到:

    H="x50x72157x64165x63164x20154x69143x65156163x65x20150141163x20x65x78160x69x72x65144x2ex20"+F

    将其修改为:H=" " +   不要为空就行。

    这句实际上是:H="Product license has expired."+F

     

    注:以上修改只是为了减少文件大小

    关掉Ckfinder的“浏览服务器”

    关掉Ckfinder的“浏览服务器”,共有三处存在“浏览服务器”,都需要去除掉。
             a、去除上传图片功能中的浏览服务器按钮
               打开ckeditorpluginsimagedialogsimage.js文件,搜索browseServer,找到该词第一次出现的位置,在后面添加“,style:'display:none;'”,注意,添的加是双引号中的内容,最前面有个英文逗号。  
               继续搜索,找到第二个browseServer的位置,这次要注意,用CSS标准语法,将“display:none;”加入到“style:”的后面去。如此,就关掉了上传图片时的“浏览服务器”功能。
              b、下面去掉文件上传中的“浏览服务器”按钮
              打开ckeditorpluginslinkdialogslink.js文件,还是搜索"browseServer"第一次出现的地方,插入双引号中的内容",style:'display:none;'"。

              c、最后删掉上传FLASH中的“浏览服务器”按钮
               打开ckeditorpluginsflashdialogsflash.js文件,还是搜索"browseServer"第一次出现的地方,插入双引号内的内容",style:'display:none;'"。

              经过上述三步,则彻底关掉了“浏览服务器”的功能。
     
    选择功能
    CKEDITOR.editorConfig = function( config )
    {
    config.language = 'zh-cn';
    config.uiColor = '#FFA';
    config.skin = 'office2003';
    config.width = 850;
    config.height = 400;
    config.toolbar = 'Full';
    // 取消 “拖拽以改变尺寸”功能
     
    config.resize_enabled = false;
    //下面两行,是关掉拼写检查的,不然加载整个文本框时,会很慢.
    config.disableNativeSpellChecker = false ;
    config.scayt_autoStartup = false;
    };

    上面代码中的config.toolbar = 'Full',是全功能、全按钮的界面,也可以自定义功能界面,我自定义的功能按钮如下:
    config.toolbar = [['Copy','PasteText', 'PasteFromWord','Image', 'Table','Bold', 'Underline','Format', 'Font', 'FontSize','TextColor', 'BGColor','Maximize'],] ;
     
    CKFinder去除某个功能
        在config.ascx文件中把ResourceType.Add 添加的功能移除
  • 相关阅读:
    我们可以用JAX-WS轻松实现JAVA平台与其他编程环境(.net等)的互操作
    Eclipse 枚举类报错
    eclipse 遇关键字enum编译问题解决
    接口测试框架开发(二):extentreports报告中文乱码问题
    接口测试框架开发(一):rest-Assured_接口返回数据验证
    使用ant运行testng的testng.xml并且使用testng-results.xsl美化结果
    TestNG简单的学习-TestNG运行
    ExtentReports 结合 TestNg 生成自动化 html 报告 (支持多 suite)
    TestNG+ReportNG+Maven优化测试报告
    IDEA+MAVEN+testNG(reportNG)
  • 原文地址:https://www.cnblogs.com/elves/p/4237537.html
Copyright © 2011-2022 走看看