參考資料: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>