ckeditor的配置实用资源-CSDN文库

需积分: 10 182 浏览量 2012-05-15 20:23:53 上传评论收藏 14KB TXT 举报

标题与描述：“ckeditor的配置实用” 此标题及描述聚焦于CKEditor的实用配置方法，CKEditor是一款广泛应用于网页开发中的富文本编辑器，能够提供强大的文本编辑功能，如格式化、图片插入、链接等，极大地提升了用户在网页上编辑内容的体验。知识点一：CKEditor的集成与初始化在网页中集成CKEditor主要分为以下步骤： 1. 引入CKEditor库：通过在HTML文件的`<head>`部分引入`ckeditor.js`文件，这是CKEditor的核心脚本。 ```html <head> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head> ``` 2. 指定编辑区域：在页面中定义一个`<textarea>`或ASP.NET的`<TextBox>`控件，并为其添加`class="ckeditor"`属性，以便CKEditor识别并应用编辑器功能。 ```html <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea> ``` 对于ASP.NET： ```html <asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox> ``` 3. 初始化编辑器：通过JavaScript调用`CKEDITOR.replace`方法，将上述定义的`<textarea>`或`<TextBox>`转换为CKEditor编辑器实例。 ```javascript <script type="text/javascript"> CKEDITOR.replace('TextArea1'); // 对于ASP.NET的TextBox CKEDITOR.replace('tbContent'); // 处理TextBox在服务器端动态生成的ID问题 CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$")%>'); </script> ``` 知识点二：CKEditor的配置选项为了满足不同项目需求，CKEditor提供了丰富的配置选项，主要集中在`ckeditor/config.js`文件中，可以自定义编辑器的语言、尺寸、皮肤样式、工具栏布局等。 1. **语言设置**：通过`config.language`选项设置编辑器界面显示的语言，如中文（简体）`'zh-cn'`。 ```javascript config.language = 'zh-cn'; ``` 2. **尺寸调整**：可设置编辑器的宽度和高度，例如： ```javascript config.width = 400; config.height = 400; ``` 3. **皮肤选择**：`config.skin`选项用于更改编辑器外观风格，例如`'v2'`代表V2皮肤。 ```javascript config.skin = 'v2'; ``` 4. **界面颜色**：通过`config.uiColor`自定义编辑器UI的颜色。 ```javascript config.uiColor = '#FFF'; ``` 5. **工具栏定制**：`config.toolbar`允许自定义工具栏中的按钮和分组，可预设多个工具栏配置，如`'Basic'`和`'Full'`。 ```javascript config.toolbar = 'Full'; config.toolbar_Full = [ ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'], // ...其他按钮组 ]; ``` 6. **工具栏可折叠性**：`config.toolbarCanCollapse`控制工具栏是否可折叠。 ```javascript config.toolbarCanCollapse = true; ``` 7. **工具栏位置**：`config.toolbarLocation`决定工具栏显示在顶部还是底部，默认为顶部。 ```javascript config.toolbarLocation = 'top'; ``` 8. **编辑器尺寸调整**：通过`config.resize_enabled`开启编辑器大小调整功能，并可设置最小和最大尺寸限制。 ```javascript config.resize_enabled = false; config.resize_maxHeight = 3000; config.resize_maxWidth = 3000; config.resize_minHeight = 250; config.resize_minWidth = 750; ``` 9. **自动更新元素**：`config.autoUpdateElement`设置编辑器内容改变时是否自动更新对应的HTML元素。 ```javascript config.autoUpdateElement = true; ``` 10. **基路径设置**：`config.baseHref`用于指定编辑器中相对路径的基准目录。 ```javascript config.baseHref = ''; ``` 11. **浮动元素z-index值**：`config.baseFloatZIndex`设置浮动元素的堆叠顺序，确保其在页面上的正确显示。 ```javascript config.baseFloatZIndex = 10000; ``` 12. **快捷键自定义**：`config.keystrokes`允许自定义编辑器的快捷键操作，如F10键的功能。 ```javascript config.keystrokes = [ [CKEDITOR.ALT+121/*F10*/, 'to'] ]; ``` 以上配置选项可根据实际项目需求进行灵活调整，以实现更加个性化和高效的内容编辑体验。通过上述详细介绍，我们可以看出CKEditor不仅功能强大，而且具有很高的可定制性，适合多种应用场景。

资源推荐

资源详情

资源评论

一、使用方法：

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

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

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

<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>

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

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

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

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

<script type="text/javascript">
CKEDITOR.replace('TextArea1');
//如果是在ASP.NET环境下用的服务器端控件<TextBox>
CKEDITOR.replace('tbContent');
//如果<TextBox>控件在母版页中，要这样写
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>

4、配置编辑器

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