您的位置：首页 > 编程语言 > PHP开发

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

2015-06-28 23:19 876 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航