参考资料:http://www.kindsoft.net/docs/usage.html
在具体项目中,往往需要将js统一管理,如放置同一目录js中,那么对应的kindeditor的调用脚本也要跟着变:
目录结构:
|--program
|--|--html
|--|--|--index.html
|--|--js
|--|--|--kindeditor.js
|--|--|--kindeditor-min.js
1、html页面调用kindeditor插件,html页面存于 与js同一级的html目录中:
<!-- index.html -->
<script charset="utf-8" src="../js/kindeditor.js"></script>
<!--或-->
<script charset="utf-8" src="../js/kindeditor-min.js"></script>
与之对应的kindeditor.js路径修改:
//kindeditor.js文件,大约225行
K.basePath = _getBasePath()
//改为
K.basePath = _getBasePath()+"../"
与之对应的kindeditor-min.js路径修改:
(注:默认的kindeditor-min.js文件格式混乱,建议先将JavaScript代码格式化。 如这个网站:http://tool.chinaz.com/Tools/JsFormat.aspx)
//kindeditor-min.js文件,大约1321行
f.basePath = f.basePath
//改为
f.basePath = f.basePath + "../"
2、form中的textarea提交时,获取不到内容:
- KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
- KindEditor在默认情况下自动寻找textarea所属的form元素,找到form后onsubmit事件里添加sync函数,所以用form方式提交数据,不需要手动执行sync()函数。
- KindEditor默认采用白名单过滤方式,可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式,保留所有标签。
<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../js/kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name="sendContent"]', {resizeType : 1,allowPreviewEmoticons : false,allowImageUpload : false,items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist', '|', 'emoticons', 'image', 'link']});});function send(){document.sendlist.action="action.php";document.sendlist.submit();
}
</script>
<form id="sendlist" name="sendlist" action="" method="post" enctype="multipart/form-data"><textarea name="sendContent" class="sendText" style="visibility:hidden;">要发送的内容</textarea><!--注意这里,在提交表单操作以前,加上editor.sync();--><input type="button" name="send" value="发送" οnclick="editor.sync(); return send();" />
</form>