Fastadmin TP installation uses Baidu rich text editor ueeditor

1、 To download UEditor

Baidu rich text editor UEditor 1.4.3 edition , The latest version of the online document is missing, as if

2、 Upload to the project directory

 For example, I upload to public/assets Next 

3、 Reference and initialize the page you need to use

<!-- html -->
<textarea id="c-remark" name="row[remark]" style="height:300px;">{$row.remark|htmlentities}</textarea>
<!-- js -->
<!--  Remember to change your path  -->
<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>

At this time, you should see the effect , However, you can see in the console that the upload configuration is wrong and the upload function cannot be used , Move on

4、 Modify background configuration

Create a new in the root directory of the rich text editor config.json

{
    
    "imageActionName": "uploadimage",
    "imageFieldName": "upfile", 
    "imageMaxSize": 2048000, 
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], 
    "imageCompressEnable": true, 
    "imageCompressBorder": 1600, 
    "imageInsertAlign": "none", 
    "imageUrlPrefix": "https://xxxxxxx/uploads/", //  Change to your domain name address 
    "imagePathFormat": "/{yyyy}{mm}{dd}/{time}{rand:6}"  //  Change to your upload rules  
    //  Remember to delete the notes  
}

5、 Modify the server unified request interface path

modify ueditor.config.js Of 33 Office , take serverUrl Change to your upload address

//  Server unified request interface path 
, serverUrl: "/api/upload/index"

6、 Add upload method

I was in /api/upload/index, Adjust according to your own

	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、 Modify a single image upload cross domain

When you upload an image, you will find that it is cross domain
Official documentation ：

Revised as follows ：
use Ajax Upload to solve this problem

First we need to modify ueditor.all.js, Reference here doAjax, newly added doAjaxFile Function to upload files ：

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

        var xhr = creatAjaxRequest(),
        // If the timeout 
        timeIsOut = false,

        // Default parameters 
        defaultAjaxOptions = {
    
            method: 'POST',

            // Timeout time .  The default is 5000,  The unit is ms
            timeout: 15000,
            
            // Is it an asynchronous request . true For asynchronous requests , false Request for synchronization 
            async: true,
            
            // Request data to carry .
            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;

        // Timeout detection 
        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');
    }

And then in UE.Ajax New function in ：

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

Finally, replace the code of the following function ：

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

Revised document ：
Remember to replace these two files at the same time .

ueditor.all.js

ueditor.all.min.js