php富文本编辑器

php富文本编辑器_第1张图片


开搞;)

首先: 百度官网上下载 umeditor 简版的富文本编辑器(这里)

然后: 解压放到自己的项目中, 配置服务器, 保证能在浏览器端加载到js,css,image...

最后: 准备好上传图片的程序, 我这里是用PHP直接上传到了七牛上

html (在第24~32行, 初始化一些配置, 不用去修改umeditor.config.js了)

复制代码
 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>UMEDITOR 完整demotitle>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 6     <link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
 7     <script type="text/javascript" src="umeditor/third-party/jquery.min.js">script>
 8     <script type="text/javascript" charset="utf-8" src="umeditor/umeditor.config.js">script>
 9     <script type="text/javascript" charset="utf-8" src="umeditor/umeditor.min.js">script>
10     <script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js">script>
11     
12 head>
13 <body>
14 
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:"", //处理图片上传的接口
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 '';
17         } else {
18             echo json_encode($r);
19         }
20     }





你可能感兴趣的:(php基础)