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

2015年6月28日 23:08:49 星期日

效果:

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

开搞;)

首先: 百度官网上下载 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.'interface/index/umeditor_upimage' ?>", //处理图片上传的接口

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     }

 

你可能感兴趣的:(editor)