asp中ckEditor配置详解及步骤

184 浏览量更新于2024-08-30 收藏 88KB PDF 举报

ASP环境中使用CKEditor进行详细配置的教程提供了对这个流行的富文本编辑器的深入理解。首先，要在网页中集成CKEditor，关键步骤包括： 1. 引入核心文件: 在页面的<head>部分，你需要引入CKEditor的核心JavaScript文件`ckeditor.js`，确保正确引用路径，如： ```html <script type="text/javascript" src="ckeditor/ckeditor.js"></script> ``` 这步是让浏览器知道在哪里找到CKEditor的功能。 2. 插入HTML控件: 为了使用编辑器，你需要在页面上创建一个`<textarea>`或在ASP.NET中使用`<asp:TextBox>`，并赋予特定的类名`ckeditor`，以便后续的脚本识别： - `<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>` 或 - `<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>` 3. 替换控件为编辑器: 使用JavaScript动态初始化编辑器，通过`CKEDITOR.replace()`方法，如： - `CKEDITOR.replace('TextArea1')` - 对于服务器端控件，需要处理客户端ID，如`CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$")%>')` 4. 配置编辑器: CKEditor的大部分配置项存储在`ckeditor/config.js`文件中。常见的配置选项包括： - 语言：设置用户界面的语言，例如`config.language = 'zh-cn';`来支持中文。 - 尺寸：定义编辑器的宽度和高度，如`config.width = 400; config.height = 400;`。 - 样式：可以选择预设的样式集，如`config.toolbarCombo_styles = ['kama', '"..."]`。在ASP.NET环境中，由于服务器端脚本的特性，可能需要额外处理控件的客户端ID，但基本的使用方法和配置原理保持一致。通过这些步骤，你可以有效地在ASP应用中集成CKEditor，并根据需求定制丰富的文本编辑体验。

asp中的中的ckEditor的详细配置小结的详细配置小结

ckeditor的详细配置:在网上找了好久终于找到了!O(∩_∩)O哈哈~使用方法:1、在页面head中引入ckeditor核心文件ckeditor.js;2、在使用编辑器的地方

插入HTML控件textarea，感兴趣的朋友可以参考下哈

ckeditor的详细配置的详细配置:

在网上找了好久终于找到了！O(∩_∩)O哈哈~

一、使用方法：

1、在页面<head>中引入ckeditor核心文件ckeditor.js

复制代码代码如下:

2、在使用编辑器的地方插入HTML控件<textarea>

复制代码代码如下:

如果是ASP.NET环境，也可用服务器端控件<TextBox>

复制代码代码如下:

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码

复制代码代码如下:

CKEDITOR.replace('TextArea1');

//如果是在ASP.NET环境下用的服务器端控件<TextBox>

CKEDITOR.replace('tbContent');

//如果<TextBox>控件在母版页中，要这样写

CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');

</script>

4、配置编辑器

复制代码代码如下:

ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：

// 界面语言，默认为 'en'

config.language = 'zh-cn';

// 设置宽高

config.width = 400;

config.height = 400;

// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'

config.skin = 'v2';

// 背景颜色

config.uiColor = '#FFF';

// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

这将配合：

config.toolbar_Full = [

['Source','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

'/',

['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'],

'/',

['Styles','Format','Font','FontSize'],

['TextColor','BGColor']

];

//工具栏是否可以被收缩

config.toolbarCanCollapse = true;

//工具栏的位置

config.toolbarLocation = 'top';//可选：bottom

//工具栏默认是否展开

config.toolbarStartupExpanded = true;

// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js

config.resize_enabled = false;

//改变大小的最大高度

config.resize_maxHeight = 3000;

//改变大小的最大宽度

config.resize_maxWidth = 3000;

//改变大小的最小高度

config.resize_minHeight = 250;

//改变大小的最小宽度

config.resize_minWidth = 750;

// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据

config.autoUpdateElement = true;

// 设置是使用绝对目录还是相对目录，为空为相对目录

config.baseHref = ''

// 编辑器的z-index值

config.baseFloatZIndex = 10000;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38607282

粉丝: 3
资源: 973

asp中ckEditor配置详解及步骤

ckeditor的详细配置

ckeditor配置(详细)

ASP+Ckeditor上传图片配置Demo和文档说明

PHP中CKEditor和CKFinder配置问题小结

ckeditor与ckfinder小结

ckeditor3.6配置

CKeditor的配置

CKeditor详细配置与使用指南

Ckeditor如何配置

CKEditor4配置与开发详细中文说明文档

最新资源