博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
asp.net下使用CKEditor和CKFinder
阅读量:7237 次
发布时间:2019-06-29

本文共 3668 字,大约阅读时间需要 12 分钟。

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

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

 

下载地址:

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 进行集成的配置方法:

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

下载地址:

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!

转载地址:http://xklfm.baihongyu.com/

你可能感兴趣的文章
2019年最全最系统的大数据学习路线
查看>>
【云周刊】第206期:2018年阿里云云攻略十二篇精选好文 ...
查看>>
面对“烟囱式”难题,联想企业网盘展现跨时空延展能力
查看>>
函数第一部分:经典的永远是简单的-Python基础前传(10)
查看>>
一个该死的Linux权限问题
查看>>
Oracle 中关于 Between and 日期边界问题
查看>>
7.5-7.8一周学习笔记
查看>>
小米首款三折叠屏手机曝光,折叠屏会是2019年热潮吗?
查看>>
云服务器能干什么
查看>>
PCIe-8604 USB3.0图像采集卡无需额外供电机器视觉智能相机网卡
查看>>
新版 Microsoft Edge 有时会假扮成不同浏览器
查看>>
redis hash底层数据结构
查看>>
H5移动前端开发常用高能css3汇总
查看>>
大规模特征构建实践总结
查看>>
java源码-LinkedList
查看>>
WPF 引用 ttf文件
查看>>
WPF自定义控件 使用阿里巴巴图标
查看>>
Window 远程桌面无法复制粘贴(转载)
查看>>
WPF中使用ReportViewer报表
查看>>
Java JimToMov(图片转视频)
查看>>