1、wangEditor：基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费
　 官网：http://www.wangeditor.com/

　 官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

2、本文应用html+框架Thinkphp3.0；
3、前端：
　准备文件：

　链接：https://pan.baidu.com/s/1PO9WsgV09v2h58rTR7BK3w
　提取码：y5z3

1371745-20200826161120108-697933161.png

html文件引用，我这里使用的是textarea获取富文本内容，官方说明：wangEditor 从v3版本开始不支持 textarea ，但是可以通过onchange来实现 textarea 中提交富文本内容。

QQ截图20230302170256.jpg

4、后端：
对应的Action里方法，因为笔者没有想到更好的办法通过编辑里回车或右上角图片删除有效的删除服务器上的图片，所有额外数据库里做了个图库表：

 public function uploads(){
        parent::YanZheng('loginemails','__APP__/Index/renew');  //验证非法用户进出页面
        import('ORG.Net.UploadFile');
        $upload = new UploadFile();        // 实例化上传类
        $upload->maxSize  = 3145728;        // 设置附件上传大小
        $upload->allowExts  = array('jpg', 'gif', 'png', 'jpeg');        // 设置附件上传类型
        $upload->saveRule = date('YmdHis',time()).mt_rand(0,9999);//
        $upload->uploadReplace = false;        // 存在同名文件是否是覆盖
        $upload->savePath = './Uploads/docpic/';
        if (!$upload->upload()) {
             $this->error($upload->getErrorMsg());
        } else {
            $info = $upload->getUploadFileInfo();
            //添加图片到图库表里
            $Person=new PersonModel();
            $condition[$Person->_id]=session('loginemails');
            $Personlist=$Person->where($condition)->find();
            $Docpic=new DocpicModel();
            $datas["Docpi_url"]=$info[0]['savename'];
            $datas["Docpi_person"]=$Personlist['Person_name'];
            $datas["Docpi_jifang"]=$Personlist['Person_bumen'];
            $datas["Docpi_date"]=date('Y-m-d H:i',time());
            // 写入用户数据到数据库
            $Docpic->add($datas);
        }
        $tempshouquanfile=$info[0]['savename'];
        $url = "http://192.168.100.1:1001/Uploads/docpic/" . $tempshouquanfile;
        $data["errno"] = 0;
        $data["data"] = $savepath;
        $data['url'] = "{$url}";    
        move_uploaded_file($_FILES["file"]["tmp_name"],$savepath);//可有可无的一段，也就是图片文件移动。
        echo json_encode($data);//返回数据
    }

5、效果：

1371745-20200826162703551-1289780906.png