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

效果:

开搞;)

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

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

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

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

 <!DOCTYPE HTML>

 <html>

 <head>

     <title>UMEDITOR 完整demo</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <link href="<?= BASEURL ?>umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">

     <script type="text/javascript" src="<?= BASEURL ?>umeditor/third-party/jquery.min.js"></script>

     <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.config.js"></script>

     <script type="text/javascript" charset="utf-8" src="<?= BASEURL ?>umeditor/umeditor.min.js"></script>

     <script type="text/javascript" src="<?= BASEURL ?>umeditor/lang/zh-cn/zh-cn.js"></script>

 </head>

 <body>

 <!--style给定宽度可以影响编辑器的最终宽度-->

 <script type="text/plain" id="myEditor">

     <p>这里可以写一些输入提示</p>

 </script>

     <button class="btn" onclick="getContent()">获得内容</button>&nbsp;

     <button class="btn" onclick="setContent('1234')">写入内容</button>&nbsp;

     <button class="btn" onclick="hasContent()">是否有内容</button>&nbsp;

 <script type="text/javascript">

     //实例化编辑器

     // window.UMEDITOR_HOME_URL = "";

     var um = UM.getEditor('myEditor',

     {

         initialContent:'欢迎使用UMEDITOR!',

         initialFrameWidth:600,

         initialFrameHeight:240,

         imageUrl:"<?= BASEURL.'path/to/uploadimage' ?>", //处理图片上传的接口

         imagePath:"", //路径前缀

         imageFieldName:"upfile" //上传图片的表单的name

     });

     function getContent() {

         var arr = [];

         arr.push(UM.getEditor('myEditor').getContent());

         alert(arr.join("\n"));

     }

     function setContent(isAppendTo) {

         var arr = [];

         arr.push("使用editor.setContent('欢迎使用umeditor')方法可以设置编辑器的内容");

         UM.getEditor('myEditor').setContent('欢迎使用umeditor', isAppendTo);

         alert(arr.join("\n"));

     }

     function hasContent() {

         var arr = [];

         arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");

         arr.push("判断结果为：");

         arr.push(UM.getEditor('myEditor').hasContents());

         alert(arr.join("\n"));

     }

 </script>

 </body>

 </html>

PHP 上传图片代码

     //富文本编辑器上传功能

     public function umeditor_upimage()

     {

         $callback = $this->G('callback');

         $info = $this->getLib('QiNiu')->upImage('upfile', 'umeditor');

         $r = array(

             "originalName" => $info['file_name'],

             "name" => $info['qiniu_name'],

             "url" => $info['qiniu_url'],//不能少

             "size" => $info['size'],

             "type" => $info['extension'],

             "state" => 'SUCCESS' //不能少

         );

         if($callback) {

             echo '<script>'.$callback.'('.json_encode($r).')</script>';

         } else {

             echo json_encode($r);

         }

     }

Summer PHP框架

PHP接入umeditor(百度富文本编辑器)的更多相关文章

  1. UMeditor百度富文本编辑器的使用

    批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js  然后搜索 img.set 替换下就好了 var url=list[i].url ;    ...

  2. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  3. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  4. 对于MVC中应用百度富文本编辑器问题的解决办法

    1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...

  5. 在MVC中应用百度富文本编辑器

    1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...

  6. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  7. ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

    本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...

  8. 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  9. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

随机推荐

  1. Mongodb3.0.6副本集+分片学习笔记

    一.使用问题记录 1. mongodb3.0.6使用mongostat参数 >./mongostat -h 127.0.0.1:27017 -u root -p 123456 /authenti ...

  2. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

  3. fedora14 安装中文输入法

    We trust you have received the usual lecture (n. 演讲 讲课 讲座; 教训 训斥 告诫) from the local SystemAdministra ...

  4. 解决英文或数字在HTMl网页中不自动换行。

    对于网页设计的新手而言,在接触一段时间的HTML/CSS后,一定会遇到这样的问题:对于已经定义了宽度的容器(如DIV,TD,段落等)如果里面出现了较长的英文或数字,则内容不能自动换行然后会将框架撑出设 ...

  5. 【C语言入门教程】2.8 C 语言的预处理命令

    预处理命令是在程序编译阶段进行执行的命令,用于编译与特定环境相关的可执行文件.预处理命令扩展了 C 语言,本节将选择其中一些常用的预处理命令进行讲解. 2.8.1 宏替换命令 宏替换命令的作用类似于对 ...

  6. 在Xcode6.4中使用OpenCV

    XCode版本6.4,OpenCV版本3.0.0 昨天我安装完OpenCV之后,兴奋地按照这篇文章Mac平台上OpenCV开发环境搭建的步骤,在XCode上建了一个Demo工程,结果编译一直不成功.一 ...

  7. fileUpload1.HasFile的返回值永远都是false的问题处理

    在aspnet项目中,如果有页面使用了fileupload,不巧你也在此页面使用了updatepanel局部刷新控件,那马就会出现一个很奇怪的问题:就是不管你选择文件了没有,fileUpload1.H ...

  8. 01WebApi防篡改机制---HMAC机制

    防篡改,顾名思义就是防止有人恶意篡改请求数据URL以达到恶意攻击的目的,那要怎么才能实现这样的目的呢? 很简单,将要请求的数据加上合作号.合作Key按规则组织成一个字符串,获取对应的MD5摘要,然后将 ...

  9. sass跨文件重写变量

    利用变量默认值: !default 你可以在变量尚未赋值前,通过在值的末尾处添加 !default 标记来为其指定. 也就是说,如果该变量已经被赋值, 就不会再次赋值, 但是,如果还没有被赋值,就会被 ...

  10. SNMP协议入门

    SNMP协议入门 1.引言 基于TCP/IP的网络管理包含3个组成部分: 1) 一个管理信息库MIB(Management Information Base).管理信息库包含所有代理进程的所有可被查询 ...