### FCKEditor试用指南 #### 1. FCKEditor 的下载及介绍 FCKEditor 是一款基于JavaScript的富文本编辑器,它提供了强大的编辑功能,适用于多种Web开发环境。这款编辑器支持自定义工具栏、多语言环境,并且能够很好地处理XHTML文档。 ##### 1.1 下载地址 - **FCKEditor主页**: [http://www.FCKeditor.net](http://www.FCKeditor.net) - **演示地址**: [http://www.FCKeditor.net/demo](http://www.FCKeditor.net/demo) - **文档位置**: [http://docs.FCKeditor.net](http://docs.FCKeditor.net) - **下载地址**: [http://www.FCKeditor.net/download](http://www.FCKeditor.net/download) ##### 1.2 FCKEditor下载包的介绍 下载包中通常包含了多个组件: - **FCKeditor_2.6.3.zip**: 客户端部分,包括了编辑器的核心文件和资源。 - **FCKeditor-java-2.4-bin.zip**: 服务器端组件,用于实现文件上传等功能。 - **FCKeditor-java-demo-2.4.war**: 示例项目,演示如何使用FCKEditor与服务器端进行交互。 #### 2. FCKEditor 的目录和文件精简 为了减少项目的体积,可以对FCKEditor的目录和文件进行精简。主要步骤如下: 1. **删除临时文件和文件夹**:从根目录开始,删除所有以“_”开头的文件和文件夹,这些通常是临时文件或不重要的资源。 2. **删除多余文件**:在根目录中只保留必要的文件,如 `fckconfig.js`(配置文件)、`fckeditor` 文件夹等。 #### 3. 在页面创建FCKEditor 创建FCKEditor可以通过多种方式实现,包括JavaScript、JSP等。 ##### 3.1 JavaScript 创建 FCKEditor 实例 可以通过不同的方法来创建FCKEditor实例: 1. **方法一:内嵌方法**(推荐) - 使用 `FCKeditor` 对象创建一个新的编辑器实例。 - 示例代码: ```javascript var oFCKeditor = new FCKeditor('Text1') ; oFCKeditor.BasePath = '/path/to/fckeditor/' ; oFCKeditor.Width = '600px' ; oFCKeditor.Height = '400px' ; oFCKeditor.ReplaceTextarea() ; ``` 2. **方法二:替换页面中的 Textarea** - 将页面上的 `<textarea>` 元素替换为 FCKEditor。 - 示例代码: ```html <textarea name="Text1" id="Text1" rows="10" cols="80"> </textarea> <script type="text/javascript"> var oFCKeditor = new FCKeditor('Text1') ; oFCKeditor.BasePath = '/path/to/fckeditor/' ; oFCKeditor.Width = '600px' ; oFCKeditor.Height = '400px' ; oFCKeditor.ReplaceTextarea() ; </script> ``` 3. **方法三:适合于 Ajax 的调用方法** - 当页面使用 Ajax 技术时,可以采用这种方式创建编辑器实例。 - 示例代码: ```javascript function CreateFCKeditor() { var oFCKeditor = new FCKeditor('Text1') ; oFCKeditor.BasePath = '/path/to/fckeditor/' ; oFCKeditor.Width = '600px' ; oFCKeditor.Height = '400px' ; oFCKeditor.ReplaceTextarea() ; } ``` 4. **Js中 FCKEditor 对象的属性和方法** - **属性**: 包括 `BasePath`、`Width` 和 `Height` 等。 - **集合**: 可以访问编辑器内部的各种元素。 - **方法**: 如 `ReplaceTextarea()` 用于替换页面中的 `<textarea>` 元素。 5. **FCKEditor 的 JS 构造器** - 用于初始化编辑器实例。 6. **将从后台读取的数据显示在 FCKEditor 中** - 示例代码: ```javascript oFCKeditor.SetHTML( 'Some HTML text' ) ; ``` ##### 3.2 在 JSP 中通过自定义标签创建 也可以通过自定义标签的方式在 JSP 页面中创建 FCKEditor 实例。 ##### 3.3 FCKEditor API 调用 API 调用可以让开发者更加灵活地操作编辑器。 ##### 3.4 适时打开编辑器 根据业务需求,可以在特定条件下打开编辑器。 #### 4. 修改 FCKEditor 的配置 可以通过修改配置文件来调整编辑器的行为。 ##### 4.1 方法一:修改 fckconfig.js 文件 直接编辑 `fckconfig.js` 文件以更改配置。 ##### 4.2 方法二:使用一个额外的配置文件覆盖默认配置 这种方式可以避免直接修改原文件,便于维护。 ##### 4.3 配置的加载顺序 了解配置文件的加载顺序对于调试和管理非常重要。 ##### 4.4 提示 提供了一些关于配置的常见技巧和建议。 ##### 4.5 一般需要修改的配置项 包括但不限于: 1. **默认语言** - 设置编辑器使用的语言。 - 示例代码: ```javascript FCKConfig.Language = 'zh-cn' ; ``` 2. **自定义 ToolbarSet** - 可以根据需求添加或移除工具栏按钮。 - 示例代码: ```javascript FCKConfig.ToolbarSets['MyCustomToolbar'] = [ ['Bold', 'Italic', 'Underline', 'StrikeThrough'], ['OrderedList', 'UnorderedList'], ['Maximize'] ] ; ``` 3. **加上几种常用的字体** - 示例代码: ```javascript FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Georgia;Times New Roman;Verdana' ; ``` 4. **修改“回车”和“Shift+回车”的换行行为** - 示例代码: ```javascript FCKConfig.EnterMode = FCK.ENTER_BR ; FCKConfig.ShiftEnterMode = FCK.ENTER_P ; ``` 5. **修改编辑区的样式文件** - 示例代码: ```javascript FCKConfig.BasePath = '/path/to/fckeditor/' ; ``` 6. **更换表情图片** - 示例代码: ```javascript FCKConfig.EmoticonsPath = '/path/to/fckeditor/emoticons/' ; ``` 7. **编辑区域的右键菜单功能** - 可以自定义编辑器内的右键菜单。 ##### 4.6 fckconfig.js 配置参数选项说明 提供了一个详细的列表,介绍了每个配置选项的作用。 ##### 4.7 自定义工具栏按钮 可以根据需求添加自定义工具栏按钮。 ##### 4.8 自定义右键菜单 提供了一种方法来自定义编辑器内的右键菜单。 #### 5. 文件上传问题 处理文件上传时可能会遇到的问题包括: 1. **开启和关闭文件上传功能** - 示例代码: ```javascript FCKConfig.FilebrowserUploadUrl = '/path/to/filebrowser/upload' ; FCKConfig.FilebrowserImageUploadUrl = '/path/to/filebrowser/upload/image' ; ``` 2. **文件上传的基本使用** 3. **上传中文文件名的文件会出现乱码** - 解决方案包括使用正确的编码格式等。 4. **创建中文名目录会出现乱码** 5. **引用中文名文件的图片不能正常显示** - 确保路径正确并且使用了正确的字符集。 6. **控件允许上传的文件的类型** - 示例代码: ```javascript FCKConfig.AllowedExtensions = ['jpg', 'jpeg', 'gif', 'png'] ; ``` 7. **控制上传的文件的大小** - 示例代码: ```javascript FCKConfig.MaxFileSize = '2MB' ; ``` 8. **增加文件删除功能** - 示例代码: ```javascript FCKConfig.FilebrowserRemoveUrl = '/path/to/filebrowser/remove' ; ``` #### 6. 超链接重定位问题 解决超链接在编辑器中出现的定位问题。 #### 7. 使用 FCKEditor 的 API 通过 API 能够更深入地操作编辑器。 ##### 7.1 获得 FCKEditor 的实例 可以通过多种方式获取编辑器实例。 1. **获得当前页 FCKEditor 实例** - 示例代码: ```javascript var oFCKeditor = FCKeditorAPI.GetInstance('Text1') ; ``` 2. **从 FCKEditor 的弹出窗口中获得 FCKEditor 实例** - 示例代码: ```javascript var oFCKeditor = window.parent.FCKeditorAPI.GetInstance('Text1') ; ``` 3. **从框架页面的子框架中获得其它子框架的 FCKEditor 实例** - 示例代码: ```javascript var oFCKeditor = window.parent.frames[1].document.FCKeditorAPI.GetInstance('Text1') ; ``` 4. **从页面弹出窗口中获得父窗口的 FCKEditor 实例** - 示例代码: ```javascript var oFCKeditor = window.opener.document.FCKeditorAPI.GetInstance('Text1') ; ``` ##### 7.2 常见的 Js 方法调用 包括: 1. **插入 HTML 到 FCKEditor** - 示例代码: ```javascript oFCKeditor.InsertHtml('<b>Some bold text</b>') ; ``` 2. **设置 FCKEditor 的内容 (HTML)** - 示例代码: ```javascript oFCKeditor.SetHTML('<p>This is some content</p>') ; ``` 3. **获取 FCKEditor 中的 XHTML** - 示例代码: ```javascript var sHTML = oFCKeditor.GetXHTML(true) ; ``` 4. **获取 FCKEditor 中的 innerHTML 和 innerText** - 示例代码: ```javascript var sInnerHTML = oFCKeditor.GetHTML() ; var sInnerText = oFCKeditor.GetText() ; ``` 5. **执行指定动作** - 示例代码: ```javascript oFCKeditor.ExecuteNamedCommand('Bold') ; ``` 6. **统计编辑器中内容的字数** - 示例代码: ```javascript var nWordCount = oFCKeditor.GetWordCount() ; ``` 7. **检查 FCKEditor 中的内容是否有改动** - 示例代码: ```javascript if (oFCKeditor.CheckDirty()) { alert('Content has changed!'); } ``` 8. **将 FCKEditor 中的内容是否有改动的值重新设置** - 示例代码: ```javascript oFCKeditor.ResetDirtyState() ; ``` #### 8. 外联编辑条 (多个编辑域共用一个编辑条) 支持多个编辑区域共享同一个工具栏。 #### 9. 解释 fck 样式 (CSS) 的工作原理 介绍如何自定义编辑器的样式。 #### 10. 获取 FCKEditor 中插入的图片 获取编辑器中插入的所有图片信息。
剩余30页未读,继续阅读
- 粉丝: 288
- 资源: 40
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- jdk8安装包包含linux和windows
- 亚控SCADA&MES产品在新能源造车新势力的生产过程管控案例分享
- 【4G DTU方案】STM32F103单片机驱动EC200S-4G模块通过MQTT协议上传GPS定位、DI开关量、温度数据到ONENET中移云平台(多协议方式接入)代码
- IMG_20241121_185929.jpg
- 微信小程序项目,课程设计-律师帮帮法律咨询.zip
- ACM竞赛中算法与团队策略的实践经验总结
- 153334910631064base.apk
- 视频游戏检测43-YOLO(v5至v9)、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- 694546715158136split_config.arm64_v8a.apk
- 956428135421969split_config.xxxhdpi.apk