所见即所得及CSS手册

####################################################################### # # KindEditor 2.4 自述文件 # ####################################################################### 一 简单使用方法 1. 把所有文件上传到程序所在目录下，例如：http://你的域名/editor/。 2. 在此目录下创建attached文件夹，并把权限改成777。 3. 要添加编辑器的地方加入以下代码。（原来的TEXTAREA或其它编辑器可以先注释。） 这里[]里的内容要根据你的实际情况修改。 ----------------------------------------------------------------------- <input type="hidden" name="[原TEXTAREA名字]" value="[这里放你要编辑的内容]"> <script type="text/javascript" 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(); //显示 //提交时获得最终HTML代码的函数 function KindSubmit() { editor.data(); } </script> ----------------------------------------------------------------------- 4. FORM的onsubmit属性里添加KindSubmit()函数。 <form name="formname" onsubmit="javascript:KindSubmit();"> 或可以放在提交按钮的onclick属性里。 <input type="button" value="Submit" onclick="javascript:KindSubmit();"> 5. 如果KindEditor文件放在其它目录下，那就需要通过skinPath、iconPath属性指定图片、笑脸目录。 * 使用方法可以参考demo文件。 ----------------------------------------------------------------------- 二 属性介绍 ----------------------------------------------------------------------- 1. siteDomain 网站域名，这个域名下的图片改成相对路径。 默认值：无 例：wwww.kindsoft.net 2. editorType simple或full，简单模式或完全模式 默认值：full 3. safeMode true或false，安全模式。true时过滤脚本和事件属性。 默认值：false 4. uploadMode true或false，上传模式。true时使用上传功能。 默认值：true 5. hiddenName 提交时编辑内容的POST参数名 默认值：无 6. editorWidth 编辑器宽度 默认值：700px 7. editorHeight 编辑器高度 默认值：400px 8. skinPath 编辑器图片路径 默认值：skins/default/ 9. iconPath 编辑器笑脸图片路径 默认值：icons/ 10. imageAttachPath 保存上传图片的路径 默认值：attached/ 11. imageUploadCgi 上传图片的CGI文件路径 默认值：./upload_cgi/upload.php 12. menuBorderColor 下拉菜单边框颜色 默认值：#AAAAAA 13. menuBgColor 下拉菜单背景颜色 默认值：#EFEFEF 14. menuTextColor 下拉菜单文本颜色 默认值：#222222 15. menuSelectedColor 下拉菜单选中颜色 默认值：#DDDDDD 16. toolbarBorderColor 工具栏背景颜色 默认值：#DDDDDD 17. toolbarBgColor 工具栏背景颜色 默认值：#EFEFEF 18. formBorderColor 编辑框边框颜色 默认值：#DDDDDD 19. formBgColor 编辑框背景颜色 默认值：#FFFFFF 20. buttonColor 按钮背景颜色 默认值：#AAAAAA ----------------------------------------------------------------------- 属性例子： ----------------------------------------------------------------------- <input type="hidden" name="content" value="[这里放你要编辑的内容]"> <script type="text/javascript" src="./KindEditor.js"></script> <script type="text/javascript"> var editor = new KindEditor("editor"); editor.siteDomain = "www.kindsoft.net"; editor.safeMode = true; // true 或 false editor.uploadMode = true; // true 或 false editor.hiddenName = "content"; //上面hidden的名字 editor.imageUploadCgi = "./upload_cgi/upload.php"; //图片上传CGI程序 editor.editorType = "simple"; // simple 或 full editor.skinPath = "skins/fck/"; //编辑器图片目录 editor.editorWidth = "700px"; //宽度 editor.editorHeight = "400px"; //高度 editor.menuBorderColor = '#696969'; editor.menuBgColor = '#EFEFDE'; editor.menuTextColor = '#000000'; editor.menuSelectedColor = '#C7C78F'; editor.toolbarBorderColor = '#696969'; editor.toolbarBgColor = '#EFEFDE'; editor.formBorderColor = '#696969'; editor.buttonColor = '#C7C78F'; editor.show(); function KindSubmit() { editor.data(); //把编辑器的内容放在content隐藏Form里。 } </script> ----------------------------------------------------------------------- 三 编写图片上传CGI ----------------------------------------------------------------------- KindEditor不建议您使用upload_cgi里自带的CGI程序，因为用这个上传图片无法进行管理。 建议您图片原名和更改后名字一起保存到文件或数据库里，并按栏目保存在不同的目录下。 1. Form结构 -------------------------------------- <form name="uploadForm" method="post" enctype="multipart/form-data" action="[imageUploadCgi指定的处理程序]"> 更改后文件名<input type="hidden" name="fileName" value=""> 文件<input type="file" name="fileData"> 描述<input type="text" name="imgTitle" value=""> 宽<input type="text" name="imgWidth" value=""> 高<input type="text" name="imgHeight" value=""> 边<input type="text" name="imgBorder" value=""> <select name="imgAlign"> <option value="">对齐方式</option> </select> 横隔<input type="text" name="imgHspace" value=""> 竖隔<input type="text" name="imgVspace" value=""> <input type="submit" name="button" value="确定"> </form> -------------------------------------- 2. 调用的JavaScript函数 parent.KindInsertImage("[图片URL]","[图片宽度]","[图片高度]","[图片边框]","[ALT里的描述]","[图片对齐方式]","[图片横向空白]","[图片竖向空白]"); 最后上传成功后执行这个函数插入图片并关闭下拉菜单。 * 注意点: 文件要上传到JavaScript里imageAttachPath目录里。 parent.KindDisableMenu(); 隐藏所有弹出菜单。 parent.KindReloadIframe(); 重新装载图片弹出菜单。 3. 具体编写方法请参考upload_cgi里的程序。 ----------------------------------------------------------------------- 四、风格制作方法 ----------------------------------------------------------------------- 1. 首先在skins目录下建立一个目录。例如： skins/myskin/ 2. 把skins/default/目录下的所有文件复制到自定义风格目录下。 然后可以一个一个替换，大小可以不同，但名字必须保持一致。 3. 在调用编辑器的地方，通过属性配置风格路径和编辑器颜色。 例如： editor.skinPath = "skins/myskin/"; //指向刚才制作好的目录 editor.menuBorderColor = '#696969'; editor.menuBgColor = '#EFEFDE'; editor.menuTextColor = '#000000'; editor.menuSelectedColor = '#C7C78F'; editor.toolbarBorderColor = '#696969'; editor.toolbarBgColor = '#EFEFDE'; editor.formBorderColor = '#696969'; editor.buttonColor = '#C7C78F'; ----------------------------------------------------------------------- ----------------------------------------------------------------------- 五、常见问题 ----------------------------------------------------------------------- 1. 怎么在GB2312编码下使用KindEditor？ 答：本编辑器默认采用UTF-8格式。要改成GB2312格式，用任何带有编码转换功能的编辑器（UltraEdit, EditPlus等）把KindEditor.js文件本身格式转换成GB2312就可以。 若使用图片上传功能，upload程序也要改成GB2312。 ----------------------------------------------------------------------- 要了解详情或有疑问，请访问http://www.kindsoft.net。