KindEditor简单使用

    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.注:
提交必须用<input type="submit" /> 按钮进行提交

5.示例:

<script>
    function check() {
        if(condition)
            return false;
        return true;
    }
</script>
<form action="#" onsubmit="return check();">
    ...
    <input type="submit" value="提交"/>
</form>

6.附录
initkindeditor

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.效果图

KindEditor简单使用_第1张图片

你可能感兴趣的:(编辑器,kindeditor,在线编辑器)