CKEdiotr入门级使用

2024-10-11 17:20:48

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 为默认路径，其目录下会自动生成images、flash等子目录。

第四步：在项目中调用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的使用。

最新文章

热门文章