PHP接入umeditor(百度富文本编辑器)

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>&nbsp;
19     <button class="btn" onclick="setContent('1234')">写入内容</button>&nbsp;
20     <button class="btn" onclick="hasContent()">是否有内容</button>&nbsp;
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     }