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" >提&nbsp;&nbsp;交</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>

第四步：效果图：