This article introduces how the fastadmin framework introduces and uses Baidu rich text

Article Directory

foreword
download file
edit file
configuration
upload image
add code
Summarize

foreword

When learning fastadmin, I need to use a rich text editor, so I checked the information, and I will share my experience with you after implementing it.

1. Download the file and put it into your own project

Click to download the file https://download.csdn.net/download/lhkuxia/86246200

Everyone's habits are different, so put them in the directory according to your habits.

I put it under public

2. Edit the file

Enter assets->js->require-backend.js to modify the code

1. Write at the bottom of the path object

 'ueconfig':'../addons/ueditor/ueditor.config',
    'ueditor':'../addons/ueditor/ueditor.all',
    'uelang':'../addons/ueditor/lang/zh-cn/zh-cn',
    'ZeroClipboard': "../addons/ueditor/third-party/zeroclipboard/ZeroClipboard",

在shim对象的底部插入以下代码 

 ueditor: [
      'ueconfig',
      'css!../addons/ueditor/themes/default/css/ueditor.css',
    ],
    uelang: ['ueditor'],
    'ueditor.zh-cn': {
      deps: ['ueditor.config', 'ueditor', 'zeroclipboard'], // Shim配置需要这样配置以来否则，会出现 not import language file 错误
    },

然后在这个js文件的最外层添加以下代码

require(['ZeroClipboard'], function (ZeroClipboard) {
    window['ZeroClipboard'] = ZeroClipboard;
});

Three, configure ueditor

Create config.json in the root directory of ueditor, and add the following code in it

{
    "imageActionName": "uploadimage",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048000,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "imageCompressEnable": true,
    "imageCompressBorder": 1600,
    "imageInsertAlign": "none",
    "imageUrlPrefix": "",
    "imagePathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoActionName": "uploadvideo",
    "videoFieldName": "upfile",
    "videoPathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoUrlPrefix": "",
    "videoMaxSize": 102400000,
    "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],
    "fileActionName": "uploadfile",
    "fileFieldName": "upfile",
    "filePathFormat": "upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
    "fileMaxSize": 102400000,
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml", ".crx"
    ]
}

4. Create your own interface for uploading pictures

Create an interface for uploading pictures under the api, the code is as follows:

 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'] = '/uploads/'.$info->getSaveName();
                    $result = json_encode($res);
                }
                break;
            case 'uploadvideo':
                $file = $this->request->file('upfile');
                if($file){
                    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                    $res = $info->getInfo();
                    $res['state'] = 'SUCCESS';
                    $res['url'] = '/uploads/'.$info->getSaveName();
                    $result = json_encode($res);
                }
                break;
            case 'uploadfile':
                $file = $this->request->file('upfile');
                if($file){
                    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'file');
                    $res = $info->getInfo();
                    $res['state'] = 'SUCCESS';
                    $res['url'] = '/uploads/file/'.$info->getSaveName();
                    $result = json_encode($res);
                }
                break;
            default:
                break;
        }
        return $result;
    }

After configuring the interface for uploading pictures, find ueditor.js in the root directory of ueditor, find the severUrl inside and set it as your own interface path

Five, add in the js that needs to be used

Add or edit method under

6. Steps to use

1. add

The code is as follows (example):

<textarea id="jobInfo" name="jobInfo" style="height:300px;"></textarea>

2. Edit assignment

The code is as follows (example):

<textarea id="jobInfo" name="row[jobInfo]" style="height:300px;">{$row.jobInfo|htmlentities}</textarea>

Write the value to be assigned in the middle of the label, and usehtmlentities把字符串转换成HTML实体

在需要的view->文件名->对应的html引入

根据自己的目录修改引入时的路径

<script src="/assets/addons/ueditor/ueditor.config.js"></script>
<script src="/assets/addons/ueditor/ueditor.all.js"></script>

Renderings:

Summarize

The above is what I want to talk about today. This article only mainly introduces the introduction and use of Baidu rich text editor. I hope it can be helpful to you.

Fast admin uses Baidu rich text editor to add assignment