• CKEditor 3.3.1 和 CKFinder 3.3.1 配置使用


    一.ckeditor 3.3.1精简
    1、删除_samples和_source文件夹,分别为示例文件和未压缩源程序
    2、删除lang文件夹下除zh-cn.js,en.js下的所有语言文件.根据需要删除
    3、删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).
    4、删除skins目录下不需要的皮肤.我一般用V2(简单.朴素) //如果只保留V2则必须在config.js中指定皮肤
    5、删除根目录下的ckeditor.asp、ckeditor.php、ckeditor_php4.php、ckeditor_php5.php(asp和php版的文件).

    二.ckeditor 3.3.1相关文件配置路径
    1、/ckeditor.js   核心文件,调用需加载
    2、/config.js     配置文件,参数配置均在此完成

    三.ckeditor应用(.net环境)
       1、引用js脚本
       <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
       2、添加TextBox控件,class设置为ckeditor
       <asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='' runat="server" />

    四.ckeditor配置(config.js配置文件)
       详细api参数见:
    http://docs.cksource.com/ckeditor_api/,我的默认配置:

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

        // Define changes to default configuration here. For example:   
         config.language = 'zh-cn'; //配置语言
        //config.uiColor = '#AADC6E'; //背景颜色   
        //config.width = 650; //宽度   
         config.height = 400; //高度
         config.skin = 'v2'; //编辑器样式(kama、office2003、v2)

        // 取消 “拖拽以改变尺寸”功能
         config.resize_enabled = true;

        // 基础工具栏
        //config.toolbar = "Basic";

        // 全能工具栏
        //config.toolbar = "Full";

        //自定义工具栏
         config.toolbar =
             [
             ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
             ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
             ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize',]
             ];

    };

    ckfinder安装

    一.ckfinder精简
       1、删除_samples和_source文件夹,分别为示例文件和未压缩源程序
       2、删除根目录下changelog.txt,install.txt,license.txt文件
       3、1.x版的删除core/lang目录下除en.js,zh-cn.js的所有语言文件(根据条件删除),2.0的删除lang和core/connector/aspx/lang目录下除en.js,zh-cn.js的所有语言文件;help目录除en外的其他目录

    二.ckfinder配置
       1、复制/bin目录下的ckfinder.dll文件至站点bin目录
       2、复制ckfinder目录至站点根目录下(可另选择路径)

    三.ckfinder应用
    1、与ckeditor集成,详情见
    官方文档,官方文档是加载修改,我用的方法是全局修改.

    具体操作方法如下:修改ckeditor目录下的config.js文件,添加::

    //在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
    var ckfinderPath = ""; //ckfinder路径
    config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

    以上URL值需要根据你ckfinder路径的不同而不同,

    破解谷哥去!

    作者:BuildNewApp
    出处:http://syxchina.cnblogs.comBuildNewApp.com
    本文版权归作者、博客园和百度空间共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则作者会诅咒你的。
    如果您阅读了我的文章并觉得有价值请点击此处,谢谢您的肯定1。
  • 相关阅读:
    Python 25个关键技术点(附代码)
    win10 LTSC 2019 激活
    【转】我都30岁了,零基础想转行去学编程,靠谱吗?
    查看SELinux状态及关闭SELinux
    Linux下使用route设置路由
    windows下使用route添加路由
    linux中core dump开启使用教程
    如何写好技术文档——来自Google十多年的文档经验
    TCP往返传输时间(RTT)的估计
    【Windows11来了】使用VMware16 pro虚拟机安装WIN11抢先体验
  • 原文地址:https://www.cnblogs.com/syxchina/p/2197338.html
Copyright © 2020-2023  润新知