kindeditor使用手册

kindeditor的使用方法 一 简单使用方法 1. 把所有文件上传到程序所在目录下，例如：http://你的域名/editor/。 2. 在此目录下创建attached文件夹，并把权限改成777。 3. 要添加编辑器的地方加入以下代码。（原来的TEXTAREA或其它编辑器可以先注释。） 这里[]里的内容要根据你的实际情况修改。 KindEditor 是一个功能丰富的网页富文本编辑器，适用于在网页上提供类似 Microsoft Word 的文本编辑体验。本使用手册将详细讲解如何安装、配置以及使用 KindEditor。 ### 一、安装与基本使用 1. **安装步骤**： - 将 KindEditor 的所有文件上传至您的网站程序目录下，例如 `http://你的域名/editor/`。 - 在 `editor` 目录下创建一个名为 `attached` 的文件夹，并确保该文件夹具有写入权限（通常设置为 777）。 - 在需要放置编辑器的位置，替换原有的 `TEXTAREA` 或其他编辑器，插入以下代码： ``` <input type="hidden" name="[原 TEXTAREA 名字]" value="[这里放你要编辑的内容]"> <script type="text/javascript" charset="utf-8" src="[JS 路径]/KindEditor.js"></script> <script type="text/javascript"> var editor = new KindEditor("editor"); editor.hiddenName = "[原 TEXTAREA 名字]"; editor.editorWidth = "[编辑器宽度,例如：700px]"; editor.editorHeight = "[编辑器高度,例如：400px]"; editor.show(); </script> ``` 2. **提交处理**： - 在表单的 `onsubmit` 属性中添加 `KindSubmit()` 函数，确保在提交时调用以获取编辑器的最终 HTML 内容。 ``` <form name="formname" onsubmit="javascript:KindSubmit();"> 或 <input type="button" value="Submit" onclick="javascript:KindSubmit();"> ``` 3. **自定义路径**： - 如果 KindEditor 的文件位于其他目录，可以通过 `skinPath` 和 `iconPath` 属性指定图片和笑脸目录。具体可参照 `demo` 文件中的示例进行设置。 ### 二、属性介绍 KindEditor 提供了一系列可配置的属性，以满足不同需求和场景： 1. **editorType**： - `simple` 或 `full`，分别代表简单模式和完全模式，默认为 `full`。 2. **safeMode**： - `true` 或 `false`，开启或关闭安全模式。若为 `true`，会过滤掉 Script 脚本，默认为 `false`。 3. **uploadMode**： - `true` 或 `false`，启用或禁用上传功能。默认为 `true`。 4. **hiddenName**： - 提交时编辑内容的 POST 参数名，无默认值，需手动设置。 5. **editorWidth** 和 **editorHeight**： - 分别定义编辑器的宽度和高度，默认分别为 `700px` 和 `400px`。 6. **skinPath** 和 **iconPath**： - 编辑器图片和笑脸图片的路径，如不更改则默认为 `./skins/default/` 和 `./icons/`。 7. **imageAttachPath**： - 保存上传图片的路径，默认为 `./attached/`。 8. **imageUploadCgi**： - 上传图片的 CGI 文件路径，默认为 `./upload_cgi/upload.php`。 9. **menuBorderColor, menuBgColor, menuTextColor, menuSelectedColor**： - 定义下拉菜单的边框、背景、文本及选中颜色。 10. **toolbarBorderColor, toolbarBgColor**： - 设置工具栏的边框和背景颜色。 11. **formBorderColor, formBgColor**： - 编辑框的边框和背景颜色。 12. **buttonColor**： - 按钮的背景颜色。 13. **cssPath**： - 自定义 CSS 文件路径，默认为 `./common.css`。 ### 三、高级用法 除了基础设置，KindEditor 还支持自定义工具栏、插件、事件监听等高级功能。你可以通过配置 `KindEditor.create()` 方法来定义编辑器的行为，例如添加或移除编辑器的工具栏项，注册事件处理器，或者使用插件来增强功能。 例如，如果你想自定义工具栏，可以在创建编辑器时指定 `items` 参数： ```javascript var editor = KindEditor.create({ id: 'editor', items: ['bold', 'italic', 'underline', 'image', 'link'], // 其他配置... }); ``` 此外，KindEditor 还提供了丰富的 API 和事件，如 `editordata()` 获取编辑器内容，`pasteHTML()` 插入 HTML，`selectText()` 选择文本等，以便进行更复杂的交互操作。 KindEditor 是一个强大且灵活的富文本编辑器，无论是简单的文本输入还是复杂的页面编辑，都能提供良好的用户体验。通过深入理解和应用其配置选项和 API，可以实现符合特定需求的定制化编辑器。