KindEditor 是国内相当不错的开源可视化HTML编辑器,在这记录一下方便以后使用,也推荐大家使用,相当美观
链接: http://www.oschina.net/p/kindeditor
1.必须导入的css,js
<link rel="stylesheet" type="text/css" href="../../js/kindeditor/themes/simple/simple.css" />(可选) <script charset="utf-8" src="../../js/kindeditor/kindeditor-min.js"></script> <script charset="utf-8" src="../../js/kindeditor/lang/zh_CN.js"></script> <script charset="utf-8" src="../../js/kindeditor/initkindeditor.js"></script>(自己封装的js)
2.调用
<script> initKindEditor('productSpec'); // 根据用的是name initKindEditor('productDesc1'); </script>
3.HTML中写法
<textarea id="productDesc1" name="productDesc1" style="width:700px;height:200px;visibility:hidden;"></textarea> <textarea id="productSpec" name="productSpec" style="width:700px;height:200px;visibility:hidden;"></textarea>
4.注:
5.示例:
<script> function check() { if(condition) return false; return true; } </script> <form action="#" onsubmit="return check();"> ... <input type="submit" value="提交"/> </form>
6.附录
function initKindEditor(expr) { KindEditor.ready(function(K) { editor = K.create('textarea[name="'+expr+'"]', { resizeType : 1, themeType: 'simple', allowPreviewEmoticons : false, allowImageUpload : false, items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link','|','undo','redo','fullscreen','|', 'selectall', 'source','about'] }); }); }
7.效果图