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 }
请发表评论