fastadmin tp 安装使用百度富文本编辑器UEditor

1、先下载UEditor

百度富文本编辑器UEditor 1.4.3版本，线上最新版缺少文件好像

2、上传到项目目录中

比如我上传到public/assets下

3、在需要使用的页面引用并初始化

<!-- html -->
<textarea id="c-remark" name="row[remark]" style="height:300px;">{$row.remark|htmlentities}</textarea>
<!-- js -->
<!-- 记得换成你的路径 -->
<script type="text/javascript" charset="utf-8" src="__CDN__/assets/addons/ueditorbjq/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__CDN__/assets/addons/ueditorbjq/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="__CDN__/assets/addons/ueditorbjq/lang/zh-cn/zh-cn.js"></script>
<script> var ue = UE.getEditor('c-remark'); </script>

此时应该能看到效果，但是能在控制台中看到上传配置错误无法使用上传功能等提醒，往下进行

4、修改后台配置

在富文本编辑器的根目录新建config.json

{
    
    "imageActionName": "uploadimage",
    "imageFieldName": "upfile", 
    "imageMaxSize": 2048000, 
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], 
    "imageCompressEnable": true, 
    "imageCompressBorder": 1600, 
    "imageInsertAlign": "none", 
    "imageUrlPrefix": "https://xxxxxxx/uploads/", // 改成你的域名地址
    "imagePathFormat": "/{yyyy}{mm}{dd}/{time}{rand:6}"  // 改成你的上传规则 
    // 记得注释删了 
}

5、修改服务器统一请求接口路径

修改ueditor.config.js的33行处，将serverUrl改成你的上传地址

// 服务器统一请求接口路径
, serverUrl: "/api/upload/index"

6、增加上传方法

我的是在/api/upload/index，根据自己的去调整

	public function index()
    {
    
        $action = $this->request->param('action');
        switch($action){
    
            case 'config':
                $result = file_get_contents(ROOT_PATH.'/public/assets/addons/ueditorbjq/config.json');
                break;
            case 'uploadimage':
                $file = $this->request->file('upfile');
                if($file){
    
                    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                    $res = $info->getInfo();
                    $res['state'] = 'SUCCESS';
                    $res['url'] = $info->getSaveName();
                    $result = json_encode($res);
                }
                break;
            default:
                break;
        }
        return $result;
    }

7、修改单张图片上传跨域

你在上传一张图片的时候会发现跨域了
官方文档说明：

修改如下：
采用Ajax上传的方式来解决这个问题

首先我们需要修改ueditor.all.js，这里参考doAjax，新增doAjaxFile函数用来上传文件：

function doAjaxFile(url, ajaxOptions) {
    
        console.log('doAjaxFile-----------------------------------------------------------')
        console.log(url)
        console.log(ajaxOptions)

        var xhr = creatAjaxRequest(),
        //是否超时
        timeIsOut = false,

        //默认参数
        defaultAjaxOptions = {
    
            method: 'POST',

            //超时时间。 默认为5000， 单位是ms
            timeout: 15000,
            
            //是否是异步请求。 true为异步请求， false为同步请求
            async: true,
            
            //请求携带的数据。
            data: {
    },

            processData: false,
            contentType: false,
            cache: false,

            onsuccess:function() {
    
            },
            onerror:function() {
    
            }
        };

        if (typeof url === "object") {
    
            ajaxOptions = url;
            url = ajaxOptions.url;
        }
        if (!xhr || !url) return;
        var ajaxOpts = ajaxOptions ? utils.extend(defaultAjaxOptions,ajaxOptions) : defaultAjaxOptions;

        //超时检测
        var timerID = setTimeout(function() {
    
            if (xhr.readyState != 4) {
    
                timeIsOut = true;
                xhr.abort();
                clearTimeout(timerID);
            }
        }, ajaxOpts.timeout);

        var method = ajaxOpts.method.toUpperCase();
        var str = url + (url.indexOf("?")==-1?"?":"&")
        xhr.open(method, str, ajaxOpts.async);
        xhr.onreadystatechange = function() {
    
            if (xhr.readyState == 4) {
    
                if (!timeIsOut && xhr.status == 200) {
    
                    ajaxOpts.onsuccess(xhr);
                } else {
    
                    ajaxOpts.onerror(xhr);
                }
            }
        };

        // xhr.upload.addEventListener("progress", function(event) {
    
        // if(event.lengthComputable){
    
        // progress.style.width = Math.ceil(event.loaded * 100 / event.total) + "%";
        // }
        // }, false);
     
        xhr.send(ajaxOpts.data);

        // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }

然后在UE.Ajax中新增函数：

sendfile:function(url, opts) {
    
   doAjaxFile(url, opts);
}

最后就是替换下面函数的代码：

domUtils.on(input, 'change', function())

修改后的文件：
记得这两个文件要同时替换。

ueditor.all.js

ueditor.all.min.js