KindEditor 简单使用案例
第一步:引入js,css包等。
<!--引入kindditor CSS-->
<link href="${pageContext.request.contextPath }/plugins/kindeditor/themes/default/default.css" rel="stylesheet">
<script charset="utf-8" src="${pageContext.request.contextPath }/plugins/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath }/plugins/kindeditor/lang/zh-CN.js"></script>
第二步:在form表单里,在对应字段下引入文本框。
<form class="form-horizontal" id="myForm">
<div class="form-group">
<label class="col-sm-3 control-label">名称:</label>
<input type="text" id="aName" name="aName" value="${automaton.aName }" class="form-control" >
</div>
<div class="form-group">
<label class="col-sm-3 control-label">型号:</label>
<textarea id="aModel" name="aModel" style="width:700px;height:400px;"> </textarea>
</div>
<button class="btn btn-primary" type="submit" >提 交</button>
</form>
第三步:引用KindEditor函数,根据id进行显示。
<script type="text/javascript">KindEditor.ready(function(K) {
window.editor1 = K.create('#aModel',{
themeType:'simple',
resizeType:1,
afterBlur:function(){this.sync();}});
});
</script>
第四步:效果图: