Cheditor文档_CKEditor资源-CSDN文库

需积分: 9 2 浏览量 2012-07-17 11:40:07 上传评论收藏 27KB DOCX 举报

### Cheditor 文档知识点 #### 一、Cheditor 概述 Cheditor 是一款功能强大的富文本编辑器，它能够支持多种编程环境如 .NET、Java 和 PHP，并且提供了丰富的编辑功能，使得开发者能够轻松地集成到自己的项目中。根据描述，Cheditor 不仅能够作为文本编辑器使用，还可以用于构建图片集等功能。 #### 二、Cheditor 的基本使用 Cheditor 的使用主要分为几个步骤： 1. **引入 CKEditor 核心文件**：首先需要在 HTML 页面的 `<head>` 部分引入 CKEditor 的核心文件 `ckeditor.js`。 ```html <script type="text/javascript" src="ckeditor/ckeditor.js"></script> ``` 2. **创建文本区域**：接下来，在需要使用编辑器的位置插入一个 `<textarea>` 或者 ASP.NET 环境下的 `<asp:TextBox>` 控件，并设置类名为 "ckeditor"。 - 使用 HTML `<textarea>`： ```html <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea> ``` - 在 ASP.NET 环境下使用 `<asp:TextBox>`： ```html <asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox> ``` 3. **替换为编辑器**：通过 JavaScript 代码将上述创建的文本区域或控件转换为 CKEditor 编辑器。 - 对于 `<textarea>`： ```javascript <script type="text/javascript"> CKEDITOR.replace('TextArea1'); </script> ``` - 对于 `<asp:TextBox>`： ```javascript <script type="text/javascript"> CKEDITOR.replace('tbContent'); </script> ``` - 如果 `<asp:TextBox>` 在母版页中，则需要进行特殊处理： ```javascript <script type="text/javascript"> CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$")%>'); </script> ``` #### 三、CKEditor 配置详解 CKEditor 提供了丰富的配置选项，可以满足不同场景的需求。以下是一些常用的配置参数： 1. **界面语言**：通过设置 `config.language` 来指定编辑器的语言，默认为英语。 ```javascript config.language = 'zh-cn'; ``` 2. **设置宽高**：可以通过 `config.width` 和 `config.height` 来调整编辑器的宽度和高度。 ```javascript config.width = 400; config.height = 400; ``` 3. **编辑器样式**：编辑器提供三种样式选择：“kama”（默认）、“office2003”、以及 “v2”。 ```javascript config.skin = 'v2'; ``` 4. **背景颜色**：可以设置编辑器的背景颜色。 ```javascript config.uiColor = '#FFF'; ``` 5. **工具栏配置**：工具栏可以根据需求进行配置，包括基础、全能或者自定义工具栏。 - 基础工具栏： ```javascript config.toolbar = 'Basic'; ``` - 全能工具栏： ```javascript config.toolbar = 'Full'; ``` - 自定义工具栏示例： ```javascript config.toolbar_Full = [ ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'], //...其他工具栏项 ]; ``` 6. **工具栏属性**：除了工具栏本身的内容外，还有一些额外的属性可以设置，比如工具栏是否可以折叠、位置等。 - 工具栏是否可以被收缩： ```javascript config.toolbarCanCollapse = true; ``` - 工具栏的位置： ```javascript config.toolbarLocation = 'top'; // 可选：bottom ``` - 工具栏默认是否展开： ```javascript config.toolbarStartupExpanded = true; ``` 7. **尺寸调整功能**：可以控制编辑器的尺寸调整功能。 - 取消尺寸调整功能： ```javascript config.resize_enabled = false; ``` - 设置最大高度： ```javascript config.resize_maxHeight = 3000; ``` - 设置最大宽度： ```javascript config.resize_maxWidth = 3000; ``` 通过上述步骤和配置，可以实现 Cheditor 的基本使用和个性化定制。这对于开发者来说是非常有用的信息，可以帮助他们在不同的项目中灵活应用 Cheditor。

资源推荐

资源详情

资源评论