2015年6月28日 23:08:49 星期日
效果:
開搞;)
首先: 百度官網上下載 umeditor 簡版的富文本編輯器(這里)
然后: 解壓放到自己的項目中, 配置服務器, 保證能在瀏覽器端加載到js,css,image...
最后: 准備好上傳圖片的程序, 我這里是用PHP直接上傳到了七牛上
html (在第24~32行, 初始化一些配置, 不用去修改umeditor.config.js了)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>UMEDITOR 完整demo</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <link href="<?= BASEURL ?>umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet"> 7 <script type="text/javascript" src="<?= BASEURL ?>umeditor/third-party/jquery.min.js"></script> 8 <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.config.js"></script> 9 <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.min.js"></script> 10 <script type="text/javascript" src="<?= BASEURL ?>umeditor/lang/zh-cn/zh-cn.js"></script> 11 12 </head> 13 <body> 14 <!--style給定寬度可以影響編輯器的最終寬度--> 15 <script type="text/plain" id="myEditor"> 16 <p>這里可以寫一些輸入提示</p> 17 </script> 18 <button class="btn" onclick="getContent()">獲得內容</button> 19 <button class="btn" onclick="setContent('1234')">寫入內容</button> 20 <button class="btn" onclick="hasContent()">是否有內容</button> 21 <script type="text/javascript"> 22 //實例化編輯器 23 // window.UMEDITOR_HOME_URL = ""; 24 var um = UM.getEditor('myEditor', 25 { 26 initialContent:'歡迎使用UMEDITOR!', 27 initialFrameWidth:600, 28 initialFrameHeight:240, 29 imageUrl:"<?= BASEURL.'path/to/uploadimage' ?>", //處理圖片上傳的接口 30 imagePath:"", //路徑前綴 31 imageFieldName:"upfile" //上傳圖片的表單的name 32 }); 33 34 function getContent() { 35 var arr = []; 36 arr.push(UM.getEditor('myEditor').getContent()); 37 alert(arr.join("\n")); 38 } 39 40 function setContent(isAppendTo) { 41 var arr = []; 42 arr.push("使用editor.setContent('歡迎使用umeditor')方法可以設置編輯器的內容"); 43 UM.getEditor('myEditor').setContent('歡迎使用umeditor', isAppendTo); 44 alert(arr.join("\n")); 45 } 46 function hasContent() { 47 var arr = []; 48 arr.push("使用editor.hasContents()方法判斷編輯器里是否有內容"); 49 arr.push("判斷結果為："); 50 arr.push(UM.getEditor('myEditor').hasContents()); 51 alert(arr.join("\n")); 52 } 53 54 </script> 55 </body> 56 </html>
PHP 上傳圖片代碼
1 //富文本編輯器上傳功能 2 public function umeditor_upimage() 3 { 4 $callback = $this->G('callback'); 5 6 $info = $this->getLib('QiNiu')->upImage('upfile', 'umeditor'); 7 $r = array( 8 "originalName" => $info['file_name'], 9 "name" => $info['qiniu_name'], 10 "url" => $info['qiniu_url'],//不能少 11 "size" => $info['size'], 12 "type" => $info['extension'], 13 "state" => 'SUCCESS' //不能少 14 ); 15 if($callback) { 16 echo '<script>'.$callback.'('.json_encode($r).')</script>'; 17 } else { 18 echo json_encode($r); 19 } 20 }