zoukankan      html  css  js  c++  java
  • asp.net下使用CKEditor和CKFinder

    1、下载 ckeditor_3.0.1.zip 并解压到 ckeditor(在根目录下)

    官方网站:CKEditor(Fully functional, open source editor, with source code included)

    下载地址:CKEditor

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

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

      在<body>标签中使用ckeditor:

      <!-- 使用 ckeditor 必须定义 class="ckeditor" -->
      <asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

      与其他 .net 控件使用方法相同,设置 Text='<%# Bind("info") %>' 可以方便与数据源进行交互。

    3、config.js 的自定义

    /*
    Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
    For licensing, see LICENSE.html or
    http://ckeditor.com/license
    */

    CKEDITOR.editorConfig = function(config) {

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

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

        // 基础工具栏
        // 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', '-', 'About']
        ];

    };

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

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

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

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

    下载地址:CKFinder for Asp.net

    6、下载 ckfinder_aspnet_1.4.1.1.zip 并解压到 ckfinder(在根目录下)

    7、将 " \ckfinder\bin\CKFinder.dll " 剪切到根目录的 Bin 文件夹中或添加 CKFinder.dll 引用,否则出现如下错误:

    XML request error: Internal Server Error (500)

    Do you want to see more info?

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

    9、在 ckeditor/config.js 中集成 ckfinder。

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

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

    10、破解〔This is the demo version of CKFinder. Click here to visit our web site.〕的注释信息:

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

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

      在<body>标签中使用ckfinder:

      <!-- 使用 ckeditor 必须定义 class="ckeditor" -->
      <asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>'
    runat="server"></asp:TextBox>

      与其他 .net 控件使用方法相同,设置 Text='<%# Bind("info") %>' 可以方便与数据源进行交互。

    12、可以将 _samples、_source 文件夹删除,lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。

    常见错误排除方法:

    ckfind文件夹的config.ascx中找到如下语句

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

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

    原因:未设置用户身份验证或者用户未登录,设置为 reture true;(不进行用户身份验证)即可。

    症状:未知错误

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

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

    ////////////////////////////////////******************************************************/////////////////////////////////////

    调试页面,出现“A potentially dangerous Request.Form value was detected from the client",按照经验,在web.config中增加

    <system.web>
    <pages validateRequest="false" />
    system.web>

    还是同样错误,在页面头部加入,

    还是出错。

    后来终于试着在config.js文件中添加下面一行:

    config.htmlEncodeOutput = true;

    OK!


  • 相关阅读:
    转载一篇关于kafka零拷贝(zero-copy)通俗易懂的好文
    kafka的一些核心理论知识
    Kafka知识点(Partitions and Segments)
    kafka: Producer配置和Consumer配置
    kafka: Java实现简单的Producer和Consumer
    SAP抛xml资料到kafka(本机模拟)
    解决方法: SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder". SLF4J: Defaulting to no-operation (NOP) logger implementation
    kafka log保存在本机的位置 kafka数据保存的位置
    Kafka: 下载安装和启动
    tomcat错误提示:指定的服务未安装。Unable to open the service 'tomcat9'的原因和解决方法
  • 原文地址:https://www.cnblogs.com/qixuejia/p/1913788.html
Copyright © 2011-2022 走看看