在tp5.1中使用百度富文本（ueditor），在富文本中通过tp插件给图片添加水印

最新推荐文章于 2023-04-27 18:50:53 发布
最新推荐文章于 2023-04-27 18:50:53 发布
阅读量677 收藏
点赞数
分类专栏： php
原文链接：https://www.php.cn/blog/detail/19907.html
版权

百度富文本：

    我们可以去官网下载，引入两个js文件，jq也需要引入。这里需要注意修改serverUrl的参数值：值为自己定义的上传文件类

需要使用的页面中添加：

<script id="container" name="content" type="text/plain"></script>
<script src="/static/ueditor/ueditor.config.js"></script>
<script src="/static/ueditor/ueditor.all.js"></script>
<script>
    var url='/ueditor1/index';
    var ue = UE.getEditor('container',{
        initialFrameHeight:360,
        serverUrl :url,
    });
</script>

这样他就会去请求，我们自己定义的类文件。我这里的url使用了路由。

下载tp的图片处理类库

composer require topthink/think-image

 

Ueditor .php类文件

<?php

namespace app\index\controller;
use think\Controller;
use think\Image;
use think\Request;
use think\Db;

class Ueditor extends Controller{
    public function index(){
        date_default_timezone_set("Asia/chongqing");
        error_reporting(E_ERROR);
        header("Content-Type: text/html; charset=utf-8");

        $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("static/ueditor/php/config.json")), true);

        $action = $_GET['action'];

        switch ($action) {
            case 'config':
                $result =  json_encode($CONFIG);
                break;
            /* 上传图片 */
            case 'uploadimage':
                $fieldName = $CONFIG['imageFieldName'];
                $result = $this->upFile($fieldName);
                break;
            /* 上传涂鸦 */
            case 'uploadscrawl':
                $config = array(
                    "pathFormat" => $CONFIG['scrawlPathFormat'],
                    "maxSize" => $CONFIG['scrawlMaxSize'],
                    "allowFiles" => $CONFIG['scrawlAllowFiles'],
                    "oriName" => "scrawl.png"
                );
                $fieldName = $CONFIG['scrawlFieldName'];
                $base64 = "base64";
                $result = $this->upBase64($config,$fieldName);
                break;
            /* 上传视频 */
            case 'uploadvideo':
                $fieldName = $CONFIG['videoFieldName'];
                $result = $this->upFile($fieldName);
                break;
            /* 上传文件 */
            case 'uploadfile':
                $fieldName = $CONFIG['fileFieldName'];
                $result = $this->upFile($fieldName);
                break;
            /* 列出图片 */
            case 'listimage':
                $allowFiles = $CONFIG['imageManagerAllowFiles'];
                $listSize = $CONFIG['imageManagerListSize'];
                $path = $CONFIG['imageManagerListPath'];
                $get =$_GET;
                $result =$this->fileList($allowFiles,$listSize,$get);
                break;
            /* 列出文件 */
            case 'listfile':
                $allowFiles = $CONFIG['fileManagerAllowFiles'];
                $listSize = $CONFIG['fileManagerListSize'];
                $path = $CONFIG['fileManagerListPath'];
                $get = $_GET;
                $result = $this->fileList($allowFiles,$listSize,$get);
                break;
            /* 抓取远程文件 */
            case 'catchimage':
                $config = array(
                    "pathFormat" => $CONFIG['catcherPathFormat'],
                    "maxSize" => $CONFIG['catcherMaxSize'],
                    "allowFiles" => $CONFIG['catcherAllowFiles'],
                    "oriName" => "remote.png"
                );
                $fieldName = $CONFIG['catcherFieldName'];
                /* 抓取远程图片 */
                $list = array();
                isset($_POST[$fieldName]) ? $source = $_POST[$fieldName] : $source = $_GET[$fieldName];

                foreach($source as $imgUrl){
                    $info = json_decode($this->saveRemote($config,$imgUrl),true);
                    array_push($list, array(
                        "state" => $info["state"],
                        "url" => $info["url"],
                        "size" => $info["size"],
                        "title" => htmlspecialchars($info["title"]),
                        "original" => htmlspecialchars($info["original"]),
                        "source" => htmlspecialchars($imgUrl)
                    ));
                }

                $result = json_encode(array(
                    'state' => count($list) ? 'SUCCESS':'ERROR',
                    'list' => $list
                ));
                break;
            default:
                $result = json_encode(array(
                    'state' => '请求地址出错'
                ));
                break;
        }

        /* 输出结果 */
        if(isset($_GET["callback"])){
            if(preg_match("/^[\w_]+$/", $_GET["callback"])){
                echo htmlspecialchars($_GET["callback"]).'('.$result.')';
            }else{
                echo json_encode(array(
                    'state' => 'callback参数不合法'
                ));
            }
        }else{
            echo $result;
        }
    }

    //上传文件
    private function upFile($fieldName){
        $file = request()->file($fieldName);
        $info = $file->move('./uploads');
        if($info){
            //上传成功
            $fname='./uploads/'.str_replace('\\','/',$info->getSaveName());

            $imgArr = explode(',', 'jpg,gif,png,jpeg,bmp');
            $imgExt= strtolower($info->getExtension());
            $isImg = in_array($imgExt,$imgArr);

//            如果是图片，开始处理。
            if($isImg){
                $image = Image::open('./uploads/' . $info->getSaveName());
                $thumbnail = 0;
                
                // 文字水印，学习参考备查
                // $image->text('studyfox.cn','./static/admin/fonts/1.ttf',15,'#ffffff')->save($fname);

                $image->water('./static/layuimini/images/logo.png',Image::WATER_NORTHWEST,100)->save($fname);
                if($thumbnail == 1){
                    //生成缩略图
                    $image->thumb(700,600,1)->save('.'.$fname);
                }
            }

            $data=array(
                'state' => 'SUCCESS',
                'url' => $fname,
                'title' => $info->getFilename(),
                'original' => $info->getFilename(),
                'type' => '.' . $info->getExtension(),
                'size' => $info->getSize(),
            );
        }else{
            $data=array(
                'state' => $info->getError(),
            );
        }
        return json_encode($data);
    }

    //列出图片
    private function fileList($allowFiles,$listSize,$get){
        $dirname = './uploads/';
        $allowFiles = substr(str_replace(".","|",join("",$allowFiles)),1);

        /* 获取参数 */
        $size = isset($get['size']) ? htmlspecialchars($get['size']) : $listSize;
        $start = isset($get['start']) ? htmlspecialchars($get['start']) : 0;
        $end = $start + $size;

        /* 获取文件列表 */
        $path = $dirname;
        $files = $this->getFiles($path,$allowFiles);
        if(!count($files)){
            return json_encode(array(
                "state" => "no match file",
                "list" => array(),
                "start" => $start,
                "total" => count($files)
            ));
        }

        /* 获取指定范围的列表 */
        $len = count($files);
        for($i = min($end, $len) - 1, $list = array(); $i < $len && $i >= 0 && $i >= $start; $i--){
            $list[] = $files[$i];
        }

        /* 返回数据 */
        $result = json_encode(array(
            "state" => "SUCCESS",
            "list" => $list,
            "start" => $start,
            "total" => count($files)
        ));

        return $result;
    }

    /*
  * 遍历获取目录下的指定类型的文件
  * @param $path
  * @param array $files
  * @return array
 */
    private function getFiles($path,$allowFiles,&$files = array()){
        if(!is_dir($path)) return null;
        if(substr($path,strlen($path)-1) != '/') $path .= '/';
        $handle = opendir($path);

        while(false !== ($file = readdir($handle))){
            if($file != '.' && $file != '..'){
                $path2 = $path.$file;
                if(is_dir($path2)){
                    $this->getFiles($path2,$allowFiles,$files);
                }else{
                    if(preg_match("/\.(".$allowFiles.")$/i",$file)){
                        $files[] = array(
                            'url' => substr($path2,1),
                            'mtime' => filemtime($path2)
                        );
                    }
                }
            }
        }

        return $files;
    }

    //抓取远程图片
    private function saveRemote($config,$fieldName){
        $imgUrl = htmlspecialchars($fieldName);
        $imgUrl = str_replace("&amp;","&",$imgUrl);

        //http开头验证
        if(strpos($imgUrl,"http") !== 0){
            $data=array(
                'state' => '链接不是http链接',
            );
            return json_encode($data);
        }
        //获取请求头并检测死链
        $heads = get_headers($imgUrl);
        if(!(stristr($heads[0],"200") && stristr($heads[0],"OK"))){
            $data=array(
                'state' => '链接不可用',
            );
            return json_encode($data);
        }
        //格式验证(扩展名验证和Content-Type验证)
        $fileType = strtolower(strrchr($imgUrl,'.'));
        if(!in_array($fileType,$config['allowFiles']) || stristr($heads['Content-Type'],"image")){
            $data=array(
                'state' => '链接contentType不正确',
            );
            return json_encode($data);
        }

        //打开输出缓冲区并获取远程图片
        ob_start();
        $context = stream_context_create(
            array('http' => array(
                'follow_location' => false // don't follow redirects
            ))
        );
        readfile($imgUrl,false,$context);
        $img = ob_get_contents();
        ob_end_clean();
        preg_match("/[\/]([^\/]*)[\.]?[^\.\/]*$/",$imgUrl,$m);

        $dirname = './uploads/';
        $file['oriName'] = $m ? $m[1] : "";
        $file['filesize'] = strlen($img);
        $file['ext'] = strtolower(strrchr($config['oriName'],'.'));
        $file['name'] = uniqid().$file['ext'];
        $file['fullName'] = $dirname.$file['name'];
        $fullName = $file['fullName'];

        //检查文件大小是否超出限制
        if($file['filesize'] >= ($config["maxSize"])){
            $data=array(
                'state' => '文件大小超出网站限制',
            );
            return json_encode($data);
        }

        //创建目录失败
        if(!file_exists($dirname) && !mkdir($dirname,0777,true)){
            $data=array(
                'state' => '目录创建失败',
            );
            return json_encode($data);
        }else if(!is_writeable($dirname)){
            $data=array(
                'state' => '目录没有写权限',
            );
            return json_encode($data);
        }

        //移动文件
        if(!(file_put_contents($fullName, $img) && file_exists($fullName))){ //移动失败
            $data=array(
                'state' => '写入文件内容错误',
            );
            return json_encode($data);
        }else{ //移动成功
            $data=array(
                'state' => 'SUCCESS',
                'url' => substr($file['fullName'],1),
                'title' => $file['name'],
                'original' => $file['oriName'],
                'type' => $file['ext'],
                'size' => $file['filesize'],
            );
        }

        return json_encode($data);
    }

    /*
    * 处理base64编码的图片上传
    * 例如：涂鸦图片上传
   */
    private function upBase64($config,$fieldName){
        $base64Data = $_POST[$fieldName];
        $img = base64_decode($base64Data);

        $dirname = './uploads/';
        $file['filesize'] = strlen($img);
        $file['oriName'] = $config['oriName'];
        $file['ext'] = strtolower(strrchr($config['oriName'],'.'));
        $file['name'] = uniqid().$file['ext'];
        $file['fullName'] = $dirname.$file['name'];
        $fullName = $file['fullName'];

        //检查文件大小是否超出限制
        if($file['filesize'] >= ($config["maxSize"])){
            $data=array(
                'state' => '文件大小超出网站限制',
            );
            return json_encode($data);
        }

        //创建目录失败
        if(!file_exists($dirname) && !mkdir($dirname,0777,true)){
            $data=array(
                'state' => '目录创建失败',
            );
            return json_encode($data);
        }else if(!is_writeable($dirname)){
            $data=array(
                'state' => '目录没有写权限',
            );
            return json_encode($data);
        }

        //移动文件
        if(!(file_put_contents($fullName, $img) && file_exists($fullName))){ //移动失败
            $data=array(
                'state' => '写入文件内容错误',
            );
        }else{ //移动成功
            $data=array(
                'state' => 'SUCCESS',
                'url' => substr($file['fullName'],1),
                'title' => $file['name'],
                'original' => $file['oriName'],
                'type' => $file['ext'],
                'size' => $file['filesize'],
            );
        }

        return json_encode($data);
    }

}

在使用中你可能遇到的错误。

errorHandler is not defined

这个错误是因为你的 file_get_contents("static/ueditor/php/config.json")这里的config.json文件地址出错了修改成自己的文件路径。

后台配置项返回格式出错,上传功能将不能正常使用!php

设置tp5.1的配置文件app.php中的'app_trace'              => false,就可以。

如果是图片水印没有添加成功，那么对照tp手册中的 扩展库->图像处理查看water()方法中的参数如何填写。

我自己做的时候就遇到和两个错误。

很多是路径的问题，这个文件类也是我拷贝的别人的，只修改了自己用到的部分。你在用其他部分出错时，先去查看他里面的方法的参数路径是否有问题。

chenlongjs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ThinkPHP打水印及设置水印位置的方法
10-21
主要介绍了ThinkPHP打水印及设置水印位置的方法,结合实例形式分析了thinkPHP打印与设置水印的相关操作步骤与具体实现技巧,需要的朋友可以参考下
前端+富文本ueditor + 富文本editor.md+在项目中使用完整示例
最新发布
06-20
该资源： 制作了两种富文本的使用demo: 1. ueditor 富文本 2. editor.md 富文本（做了组件封装使用更加便捷） 预览地址：https://chengmaofeng.gitee.io/preview/rich-text/#/
百度编辑器Ueditor 增加图片水印功能的解决方案
qq_39414785的博客
05-16 424
百度编辑器竟然没有找到图片水印的功能，自己补充进去 修改/editor/php/config.json文件，在第11行后面，增加代码 "isWaterMark": true,/*水印*/ 修改/editor/php/action_upload.php，在上传配置的代码中，修改如下 switch (htmlspecialchars($_GET['action'])) { case 'uploadimage': $config = array( "pa
thinkphp5整合最新ueditor，支持图片加水印
wyp584168的专栏
07-07 1891
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码... thinkphp5 TPshop项目开发中用到了富文本编辑器，选择有很多，不过资料手册文档最齐全的当然属百度的ueditor，可是发现TPshop2.05版之前使用的是ueditor1.26老版本，在上传图片时需要依赖flash，
tp5.1----ueditor富文本
weixin_47830577的博客
07-30 198
富文本就是一种可编辑的文档，类似于word(一般用于在网站后端的界面中) 下载一个资源：富文本编辑器ueditor 啥是“富文本”编辑器？就是比单纯的textarea“富” 添加了富文本编辑器之后，输入框可以功能更丰富一些 http://ueditor.baidu.com/website/ 这是百度出品的富文本编辑器 将下载好的资源放到 项目的入口文件public中的 可以改个名字ueditor 在代码中通过script引入路径 启用富文本编辑器 这里是个固定命令 UE大写 后面是getEditor
【积跬步以至千里】富文本编辑器下CSDN博客图片水印设置教程（简单易学）
水亦心的博客
11-13 616
写博客的时候，大家都会留意到有水印，博客自带的水印可能是无法满足大家需求的，这个时候，就需要自己进行水印设置，网上相关教程很多，鱼龙混杂，无非就是原创的，复制粘贴标注成原创的和转载的。但是由于博客在更新，很多东西现在已经不能再使用，或者使用方式已经有所改变。 为了能让大家能清晰地看到效果，有些水印我会设置的比较夸张，而且全文不会出现相同的水印。希望大家能够理解。 一、Markdown编辑器与富...
React中使用UEditor百度富文本的方法
10-18
主要介绍了React中使用UEditor的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
百度富文本编辑器ueditor上传图片宽高超范围问题
06-08
百度ueditor上传图片超范围后有两个问题，一是编辑器里图片显示不完整，二是添加图片后的网页在显示时也会超出网页不好看。想让它自适应100%，网上的方案能解决第一个问题，基本没有第二个问题的方案，经过多次测试...
js获取UEditor富文本编辑器中的图片地址
10-15
主要介绍了js获取UEditor富文本编辑器中的图片地址,最简单的思路应该是先获取UEditor中的内容再将获取到的字符串转换成jquery对象，选择器找到img元素，获取src值
php编辑器中上传图片,PHP版的kindeditor编辑器加图片上传水印功能
weixin_35349608的博客
03-11 142
功能实现代码，是从网上搜索来的，网上的代码虽然可以实现，但是其中有些问题，所以我稍微改了下。我修改涉及的地方：1，由于我用的是thinkphp框架,kindeditor编辑器放在Public\plugins\kindeditor里面，水印中涉及到的水印图片和字体，我放在了\Public\images里面。水印图片用gif可以，用png格式的显示一块空白。2，文字水印，可以显示，但文字总是偏的，显示...
ThinkPHP中使用Ueditor富文本编辑器
10-23
主要介绍了ThinkPHP中使用Ueditor富文本编辑器,需要的朋友可以参考下
tp6.1 bingher/ueditor(百度编辑器)(七牛、阿里OSS第三方云)详情图文教程(2023年第二版)
php菜鸟技术天地
04-27 769
tp6.1 bingher/ueditor(百度编辑器)(七牛、阿里OSS第三方云)详情图文教程
tp5.0使用百度富文本Ueditor上传图文，开发环境 Lamp
qq_42697053的博客
11-21 495
百度富文本上传图片和文字非常方便，而且使后台文本域变得相对丰富和美观，话不多说，让我们进入百度富文本的学习，纯干货又简单。 1、下载editor 点击进入官网下载 2、下载后放置我们的tp5目录中,我放在了public/static/admin/uditor ...
tp6 富文本编辑器
qq_61984694的博客
03-05 665
tp6 富文本编辑器
tp框架中使用 百度富文本编辑器
qq_41515189的博客
04-09 851
1.首先下载相匹配的下载PHP版本utf版富文本编辑器 https://www.jb51.net/codes/56667.html 官方网文档说明 http://fex.baidu.com/ueditor/#dev-bale_width_grunt 把它放到Public的目录下。 2.我们在视图view上,要用到富文本编辑器的时候，一般都是在表单加入textarea, <div clas...
TP5-百度富文本编辑器
bacao0981的博客
07-22 145
1.首先下载 ueditor文件 2.把文件放到 public\static\admin（后台） 下面 3、头部引入（注意前面加__PUBLIC__）　　　　ueditor.config.js　　　　ueditor.all.min.js　　　　lang/zh-cn/zh-cn.js 4、编辑器显示处加 id="content" 3、底部　　<script type="te...
百度编辑器上传图片添加水印方法
IT羊的博客
11-09 3487
最近做项目，用的是百度编辑器，客户有个要求，上传图片的时候批量添加水印，基本上说我是菜鸟型的，百度半天找了好些方法，都不对，最后找到一个方法，测试了下，暂时没问题，把它记录下来，供大家参考。 1、打开ueditor目录下的php目录下的config.json 文件，在上传配置项添加下面代码："iswatermark": "true", /* 图片上传水印 */2、打开ueditor目录下的php目
【转载】thinkphp3.2嵌入百度编辑器ueditor的实例代码
qq_40263043的博客
07-31 181
本篇文章主要介绍了thinkphp3.2嵌入百度编辑器ueditor的实例代码，具有一定的参考价值，有兴趣的可以了解一下 本文介绍了thinkphp3.2嵌入百度编辑器ueditor，分享给大家，希望此文章对各位有所帮助 因为排版要求，很多时候我们需要嵌入富文本编辑器，输出带html标签的文本内容。因为我最近做一个后台管理系统，要求编辑好文本内容，让它输出带html标签的文本存到服务器，客户端发请求拿到服务器的带标签文本。我用的是ueditor, 1.首先我们去到这里https://www...
如何将Ueditor富文本框 加入TP框架
lw545034502的博客
03-06 474
1.将Ueditor源码加到项目中:2.创建控制器调用视图：3.创建视图：复制代码如下：&lt;!--①引入一个css文件和4个js文件--&gt; &lt;link href="__COMMON__/Ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet"&gt; &lt;script type="text.
java使用百度富文本框_快速掌握百度富文本编辑器 UEditor 的使用
05-13
下面简单介绍一下在Java Web项目中使用百度富文本编辑器UEditor的方法。 1.下载UEditor 首先，需要从百度UEditor官网上下载UEditor的源代码。下载地址为：http://ueditor.baidu.com/website/download.html 2.将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值