1. 程式人生 > >富文字編輯器kindeditor的使用!快速掌握

富文字編輯器kindeditor的使用!快速掌握

廢話不多說,本篇主要是教你如何使用kindeditor的請看:

首先下載    地址:http://kindeditor.net/down.php 直接官方下載即可

                 把你下載的檔案直接引入你的專案中最好是根目錄下(我所理解的根目錄是和你的js和css資料夾同級即可)

          引入:如下圖 兩個js即可(當然包括jq了):

<script type="text/javascript" src="<%=basePath%>js/jquery-3.2.1.min.js"></script>
<script charset="utf-8" 
src="<%=basePath%>kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="<%=basePath%>kindeditor/lang/zh-CN.js"></script>

接著就是 使用: 建立一個textarea如下圖:

<textarea id="kindEditor_demo" name="sysArticle.articleContent" placeholder="開始你的表演"></textarea>


再就是  在js裡面使用了:

  var editor;
KindEditor.ready(function(K) {
      editor = K.create('textarea[name="sysArticle.articleContent"]',{
       resizeType : 1,  
allowPreviewEmoticons : false,
allowImageUpload : true,    //允許上傳圖片
allowFileManager : true,
uploadJson : '/kindeditor/jsp/upload_json.jsp',   //上傳圖片引用的後臺程式碼。雖然是
jsp檔案但裡面的程式碼是後臺程式碼 afterUpload:function(){ this.sync(); //將你上傳的圖片同步到顯示區域 }, // items : [ // 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'subscript', 'superscript', 'bold', 'italic', 'underline', // 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', // 'insertunorderedlist', '|', 'emoticons', 'image','multiimage', 'link', '|', 'preview', 'source', 'fullscreen'], afterBlur : function() { this.sync(); //焦點問題,這裡不寫會出問題.同步KindEditor的值到textarea文字框 } }); });

需要強調的是uploadJson這裡一定是你將要引用的jsp檔案,並不是什麼 介面,所以不要糾結

還有就是  你肯定要把頁面中的內容想辦法拿到手 所以:

$('#js_preview button').click(function(){     //點選展示手機demo
editor.sync();     //將使用者填寫的內容同步到你建立的textarea裡面
value_content = $("#kindEditor_demo").val();  //這時你就可以獲取到裡面的內容
$('.show_content').append(value_content);
$('.drap').show();
$('.phone_show').show();
});


接下來就是 修改他的後臺程式碼 :很關鍵的一步大多數難就難在這裡

//檔案儲存目錄路徑
String savePath = "D://" ;   //你想讓圖片檔案放在那裡
//檔案儲存目錄URL
String saveUrl  = "http://192.168.1.24:8080/";   //你將通過這個地址訪問圖片 

主要就是修改這兩個地址的程式碼:

我當時的情況是:他的程式碼不適合我所以我們後臺同時變動了一下所以你可以下載我的程式碼替換他的upload_json.jsp裡的程式碼:點選開啟連結

http://download.csdn.net/download/qyp_slw/10191795

差不多就完了。