給web項目整合富文本編輯器

給jsp頁面整合富文本編輯器
下載——刪除多餘的組件——加入到項目中——參照案例來完成整合
步驟:
1. 解壓zip文件,將全部文件複製到Tomcat的webapps/kindeditor目錄下。css

2. 將kindeditor/jsp/lib目錄下的3個jar文件複製到Tomcat的lib目錄下,並從新啓動Tomcat。
 * commons-fileupload-1.2.1.jar
 * commons-io-1.4.jar
 * json_simple-1.1.jar
如下用我下載的副文本編輯器爲例
3.把下邊的集成表明粘貼到目標文件中(記得修改必要的數據)
代碼以下:
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/themes/default/default.css" />
 <link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css" />
 <script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/kindeditor.js"></script>
 <script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/lang/zh_CN.js"></script>
 <script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.js"></script>
 <script>
  KindEditor.ready(function(K) {
  //這裏名字是富文本域的name,後臺取數據時用的name
   var editor1 = K.create('textarea[name="context"]', {
    cssPath : '<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css',
    uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',
    fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',
    allowFileManager : true,
    afterCreate : function() {
     var self = this;
     K.ctrl(document, 13, function() {
      self.sync();
      //注意修改這裏的form表單的名字
      document.forms['nameForm'].submit();
     });
     K.ctrl(self.edit.doc, 13, function() {
      self.sync();
      document.forms['nameForm'].submit();
     });
    }
   });
   prettyPrint();
  });
 </script
4.運行項目,效果就出來了。web

相關文章
相關標籤/搜索