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(" ")); 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(" ")); 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(" ")); 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 }