PHP客户端使用ueditor配置图片上传及文章功能

最近开发一个全新的文章录入功能

由于之前封装的不太好用，今天重新走了一遍流程，从百度官方下载ueditor开始

首先到官方下载好ueditor PHP包

下载好了之后配置到服务器上，本地测试就行了

直接访问ueditor/index.html就可以看到完整的DEMO了

到这里明显是满足不了我们的业务需求的，比如我们要编辑文章功能

这时候需要几个地方的配置，首要的就是图片，图片配置文件如下：

上图打开config.json文件后，你会看到很多配置项

上图的imagePathFormat参数就是用来配置图片路径的

有人就说了，这有什么好讲的呢？问题来了，如果默认不更改的话你的图片也可以上传成功，但是当你查询这篇文章的时候，你会发现图片显示不出来

问题就在于，你提交到数据库中的时候没有对图片进行处理，自然就访问不到图片了

这里的问题就是怎么处理ueditor上传的图片了，并且让图片在文章对应的位置显示出来

首先数据库应该有个字段是存储文章的，而且是要存储html，这样在查询出来时就可以转换后渲染

数据库字段数据类型选择text

下面代码是核心：

function addremote($v) {
    return ((int)$_SERVER['SERVER_PORT'] == 443 ? 'https' : 'http').'://'.$_SERVER['HTTP_HOST'].$v;
}
function filterImg($wants,$str){
    $pattern='/src=\"(.+?)\".*?/';
    preg_match_all($pattern, $str, $match);
    $src_array = array();
    if ($match)
        $src_array = $match[1];
    return str_replace($src_array, $wants, $str);
}
$str = "ueditor的内容，也就是前端传过来的";
$img_array = array();
//下面代码过滤出$str里的图片链接
preg_match_all("/<[img|IMG].*?[src|SRC]=[\'|\"](.*?(?:[\.gif|\.png|\.jpg|\.bmp|\.jpeg]))[\'|\"].*?[\/]?>/", $str, $img_array);
$addrs = $img_array[1]; //得到图片链接地址，也就是前端上传成功的图片地址
$wants = array_map("addremote",$addrs); //过滤加上服务器Host地址
$content = htmlspecialchars(filterImg($wants,$str));//将内容转为html实体

最后将整个$content存储到数据库text数据类型的字段中

下次查询出来的图片地址就是完整的绝对路径

在配置文件中，还可以配置其它选项，比如去掉部分按钮

上图片中的参数值就是ueditor编辑器上对应的按钮，你可以根据需求进行调整

关于设置外观属性，不建议修改源代码，可以在实例化ueditor之后通过调整官方给的方法来设置，例如设置宽度：

var ue = UE.getEditor('container_');
                ue.ready(function(){
                    ue.setHeight(300);
                });

简单应用ueditor PHP端就是这样了，不过有个问题一直没有得到解决，如果用户在编辑器中上传了图片后撤退删除了，这时候服务器上的图片该怎么同时删除呢？这是个疑问，有知道的大佬不防一提

每天自学4小时

发布了45 篇原创文章 · 获赞 7 · 访问量 1万+

私信关注

PHP客户端使用ueditor配置图片上传及文章功能

猜你喜欢