CKEdiotr是一款不错的网页富文本编辑器,其内置的功能最大满足用户的需求,先将CKEditor的简单实用做个总结,以便于日后查看、使用。我用的是.net平台,故而以下介绍的是.net的CKEditor。

第一步:获取CKEditor工具。

1.1在官网的下载页面下载你所需要的语言的CKEditor,官网是:http://ckeditor.com/download ,选择CKEditor 3.6.4 for ASP.NET(若有最新版本,建议使用最新版本,下同)。

1.2 只有CKEditor还是不够的,因为CKEditor只有富文本编辑功能没有上传功能,所以下载一个与之配套的CKFinder,官网是:http://cksource.com/ckfinder/download ,选择.net版本。

第二步:引用到项目中

2.0 把CKEditor和CKFinder两个文件复制到项目的适当位置(建议是UI层的根目录)。

2.1 使用CKEditor的时候需要在页面引用js,在解压后的CKEditor文件夹的根目录下引用ckeditor.js、config.js、ckeditor_basic.js这三个文件。

2.2 同样,需要引用CKFinder里的js文件:ckfinder.js、ckfinder_v1.js。

2.3 找到解压后的CKEditor文件夹中的ckeditor_aspnet_3.6.4\bin\Release目录下的CKEditor.NET.dll文件,复制到项目的Bin文件夹下并引用

2.4 找到解压后CKFinder文件夹中的ckfinder\bin\Release目录下的CKFinder.dll文件,复制到项目Bin文件夹中并引用。

2.5 页面注册:<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

第三步:配置CKEditor和CKFinder

3.1 CKEditor中的config.js文件是对CKEditor的配置,这里可以自定义一些自己所需要的功能,一般的,我们只需定义编辑器的语言、背景色、高度、宽度、样式、皮肤、工具栏等这些基础的东西,这些使用手写代码设置的,具体的代码如下:

config.language='zh-cn';//中文

config.skin='kama';//皮肤

//取消“拖拽改变尺寸”功能

config.resize_enabled = false;

config.width=900;//宽

config.height=400;//高

// config.uiColor = '#FFF'; //背景颜色

//全能工具栏

config.toolbar = "Full";

// 基础工具栏

// config.toolbar = "Basic";

config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

// 自定义工具栏

//    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']

//    ];

config.tabSpaces = 4;

config.resize_maxWidth = 600;             //如果设置了编辑器可以拖拽 这是可以移动的最大宽度

config.toolbarCanCollapse = false;        //工具栏可以隐藏

//config.toolbarLocation = 'bottom';      //可选:设置工具栏在整个编辑器的底部bottom

config.resize_minWidth = 600;             //如果设置了编辑器可以拖拽 这是可以移动的最小宽度

config.resize_enabled = false;            //如果设置了编辑器可以拖拽

//验证非法数据

config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ;            // <iframe> tags.

config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ;          // <frameset> tags.

config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ;             // <frame> tags.

config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.

config.protectedSource.push( /<%[\s\S]*?%>/g ) ;                    // ASP style server side code

config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ;                  // PHP style server side code

config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;

//config.startupFocus = true; //打开时就focus

注意:这些代码全部是在config.js文件中的CKEDITOR.editorConfig = function( config ){};方法内;

3.2在CKEditor中集成CKFinder

3.2.1 在CKEditor的config.js中CKEDITOR.editorConfig = function( config ){};函数内添加如下语句:

//集成CKFinder

CKFinder.SetupCKEditor(null, '../ckfinder/');//第二个参数是ckfinder文件夹的路径,注意路径要正确

这句就是在CKEditor中集成CKFinder的语句,该语句不可少。否则不能上传图片视频等。

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

 

第四步:在项目中调用CKEditor

调用的时候有人说可以把CKEditor放入工具栏中,直接拖动使用,这个方法我没有做出来(找到了,见下文),所以又找了个方法:直接用TextBox控件,具体的使用方法如下代码:

<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

这种使用方法与其他.net控件使用方法相同,设置Text='<%# Bind("info") %>' 可以方便与数据源进行交互;使用CKEditor必须定义class="ckeditor"

附加

F1、 常见错误及排除:

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!

F2、 解压后的CKEditor和CKFinder文件释义,如下图

图F2-1 CKFinder文件夹

图F2-2 CKEditor文件夹

F3、Config.js文件里的其他设置

//自定义的一些表情图片,对应的也要将表情包中名词改变;

config.smiley_images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif',

'17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif',

'31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif',

'45.gif','46.gif',"47.gif",'48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif',

'59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif'];

//设置工具栏里面的工具 最主要的config.toolbar = [
['Bold','Italic','Underline','Strike','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft',

'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Flash','Smiley','Table',

'RemoveFormat','Source']
];
工具设置:
 config.toolbar =
[
    ['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'],
    ['Font', 'FontSize'],
    ['TextColor', 'BGColor'],
    [ 'Undo', 'Redo']
];

F4、把CKEditor放入VS的自定义工具栏

首先找到ckeditor_aspnet_3.6.4\bin\Release目录下的CKEditor.NET.dll文件,放在一个不容易删且合适的位置,在VS的工具栏中右击,然后选择添加选项卡,设置名字为CKEditor,在CKEditor选项卡中右击,选择“选择项”,在“.NET Framework组件”中浏览到你刚才放的dll文件,然后确定。OK搞定!现在CKEditorControl控件已经出现在你的工具选项卡里了,其使用你可以参考TextBox的使用。

CKEdiotr入门级使用的更多相关文章

  1. IDEA入门级使用教程

    原文链接:https://blog.csdn.net/qq_31655965/article/details/52788374 最智能的IDE IDEA相对于eclipse来说最大的优点就是它比ecl ...

  2. Winform 控件的入门级使用(一)

    开始总结一下控件的基本用法,方便以后查阅. 一.Label Label 的使用频率很高,基本上也没有什么难度. #region Winform //label label.Text = "这 ...

  3. XCube和X组件的入门级使用教程

    我也是一个入门级的初学者,在学习魔方的时候,很多不是很懂的地方,而网上的资料又比较少.尤其是Newlife的论坛打不开的情况下 所以就想着把这个初级项目做完后,做一个入门级教程.保证人人都看得懂(.^ ...

  4. IDEA入门级使用教程----你怎么还在用eclipse?

    http://blog.csdn.net/qq_31655965/article/details/52788374

  5. iconfont 入门级使用方法

    iconfont : what? 阿里妈妈MUX倾力打造的矢量图标管理.交流平台.设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师 ...

  6. ansible的入门级使用

      author: headsen  chen   date: 2018-08-02   11:46:35 1,ansible的安装 yum install epel-release yum -y i ...

  7. git 入门级使用

    git-book 全局配置:(配置完之后,进行一次密码设置之后,无需再使用密码进行分支管理) git config --global user.name "zhxj" git co ...

  8. vim入门级使用

    1.刚进入是 command mode 命令行模式 2.i  进入插入 insert  mode 模式 在插入模式下只能 输入内容,如果要删除内容,需要切换到命令行模式,移动光标进行删除. 3.esc ...

  9. Jetpack系列:LiveData入门级使用方法

    Android APP开发中,开发者们都想有一个公共的组件,可以实现后台数据的监听,同时实时更新到UI进行显示,从而大大简化开发过程.Google针对这一开发需求,提供了Jetpack LiveDat ...

随机推荐

  1. 3145 code[VS]汉诺塔游戏--递归

    3145 汉诺塔游戏 题目描述 Description 汉诺塔问题(又称为河内塔问题),是一个大家熟知的问题.在A,B,C三根柱子上,有n个不同大小的圆盘(假设半径分别为1-n吧),一开始他们都叠在我 ...

  2. 7天学会HTML--HTML综述

    一周学会HTML 1.HTML是什么? HTML 指的是超文本标记语言 (Hyper Text Markup Language) 2.HTML发展历程 HTML版本从1.0到4.0不断升级,其版本的规 ...

  3. Jython引用Java类

    Ubuntu下如下指令安装Jython:$ sudo apt-get install jython下面的指令用于查看Jython版本:$ jython --version下面的代码是一个简单的Java ...

  4. sql注入笔记

    来源:https://blog.csdn.net/u011781521/article/details/57083482 这个工作上遇到了个实例: 在input框里 输入 kear'  页面 报错,出 ...

  5. PTA PAT排名汇总(25 分)

    PAT排名汇总(25 分) 计算机程序设计能力考试(Programming Ability Test,简称PAT)旨在通过统一组织的在线考试及自动评测方法客观地评判考生的算法设计与程序设计实现能力,科 ...

  6. 微信小程序之wx.requestPayment 发起微信支付

    wx.requestPayment 发起微信支付 timeStamp 时间戳 nonceStr 随机字符串 package 统一下单接口返回的 prepay_id 参数值 signType 签名算法 ...

  7. python开发函数进阶:递归函数

    一,什么叫递归 #递归#在一个函数里调用自己#python递归最大层数限制 997#最大层数限制是python默认的,可以做修改#但是我们不建议你修改 例子和尚讲故事 #!/usr/bin/env p ...

  8. MariaDB存在的问题

    MySQL与MariaDB对嵌套的查询语句当中的order by的处理方法不同.MySQL会忠实执行内层查询的排序子句,但是MariaDB会将这个order by去掉,理论依据就是关系理论 --- 一 ...

  9. .gitignore non-valiate

    Git忽略规则及.gitignore规则不生效的解决办法 分享到:更多19 2015-02-12    分类:Share2人评论65,215 次人浏览 在git中如果想忽略掉某个文件,不让这个文件提交 ...

  10. MFC 控件使用汇总

    一.动态创建button CButton *button=new CButton; button->Create(_T(,,,),);//最后一个是ID BEGIN_MESSAGE_MAP(CM ...