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. 百万级数据查询到datatable中,提示内存溢出

    参考资料: http://group.cnblogs.com/topic/32230.html

  2. 黄永成-thinkphp讲解-个人博客讲解26集

    如果是要导入 前后台分组都公用的 第三方类库, 就将类库(*.class.php文件) 放在 App下的Class文件夹中. 导入方法是: import('Class.Image', APP_PATH ...

  3. wamp包--如何导出sql

    在windows下安装wamp,如果不想用phpmyadmin工具和其他工具,如何导出自己想要的sql呢. 比如:我想导出blogyaf库,可以从以下步骤进行操作. 1,进入到wamp的mysql安装 ...

  4. Hadoop生态系统

    Hadoop 生态圈

  5. php/js获取客户端mac地址的实现代码

    这篇文章主要介绍了如何在php与js中分别获取客户度mac地址的方法,需要的朋友可以参考下   废话不多讲,直接上代码吧! 复制代码 代码如下: <?php   class MacAddr {  ...

  6. ThinkPHP3.2.3扩展之生成PDF文件(MPDF)

    目前是PHP生成PDF文件最好的插件了,今天介绍下在ThinkPHP3.2.3里如何使用. 先安照路径放好如图. 下面是使用方法 public function pdf(){ //引入类库 Vendo ...

  7. 看开源代码利器—用Graphviz + CodeViz生成C/C++函数调用图(call graph)

    一.Graphviz + CodeViz简单介绍 CodeViz是<Understanding The Linux Virtual Memory Manager>的作者 Mel Gorma ...

  8. VTK初学一,c_Line_CellArray线段的CellArray绘制

    VTK窗口默认坐标方向: #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE ...

  9. 【Junit】The import org.junit.Test conflicts with a type defined in the same file报错

    引入Junit后,进行单元测试,莫名其妙报了个这样的错误 The import org.junit.Test conflicts with a type defined in the same fil ...

  10. hdu1757 A Simple Math Problem

    Problem Description Lele now is thinking about a simple function f(x).If x < 10 f(x) = x.If x > ...