thinkphp5 + layui+ueditor富文本编辑器

1. 准备工作

     1.  安装node和npm

curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install
npm run buildnpm -v

　　

  2. 安装ueditor

#进入项目public目录下

git clone https://github.com/fex-team/ueditor.git

#安装grunt

npm install -g grunt-cli

#进入ueditor目录下

npm install grunt --save-dev

grunt default

3.  前端代码

<div class="layui-form-item">

<!--            </textarea>-->
            <script id="container" name="content" type="text/plain">{:isset($info.content)?htmlspecialchars_decode($info.content):''}</script>
            <!-- 配置文件 -->
            <script type="text/javascript" src="/ueditor/dist/utf8-php/ueditor.config.js"></script>
            <!-- 编辑器源码文件 -->
            <script type="text/javascript" src="/ueditor/dist/utf8-php/ueditor.all.js"></script>
            <!-- 实例化编辑器 -->
            <script type="text/javascript">
                var url="{:url('/admin/ueditor')}";
                var ue = UE.getEditor('container',{
                    serverUrl :url,
                    initialFrameWidth:1100,
                    initialFrameHeight:400
                });
            </script>
        </div>

4. 后端代码

<?php
namespace app\admin\controller;
use OSS\Core\OssException;
use OSS\OssClient;
use think\facade\Env;

class Ueditor extends Common
{
    private $file; //文件上传对象
    private $base64; //文件上传对象
    private $config; //配置信息
    private $oriName; //原始文件名
    private $fileName; //新文件名
    private $fullName; //完整文件名,即从当前配置目录开始的URL
    private $filePath; //完整文件名,即从当前配置目录开始的URL
    private $fileSize; //文件大小
    private $fileType; //文件类型
    private $stateInfo; //上传状态信息,
    private $stateMap = array( //上传状态映射表，国际化用户需考虑此处数据的国际化
        "SUCCESS", //上传成功标记，在UEditor中内不可改变，否则flash判断会出错
        "文件大小超出 upload_max_filesize 限制",
        "文件大小超出 MAX_FILE_SIZE 限制",
        "文件未被完整上传",
        "没有文件被上传",
        "上传文件为空",
        "ERROR_TMP_FILE" => "临时文件错误",
        "ERROR_TMP_FILE_NOT_FOUND" => "找不到临时文件",
        "ERROR_SIZE_EXCEED" => "文件大小超出网站限制",
        "ERROR_TYPE_NOT_ALLOWED" => "文件类型不允许",
        "ERROR_CREATE_DIR" => "目录创建失败",
        "ERROR_DIR_NOT_WRITEABLE" => "目录没有写权限",
        "ERROR_FILE_MOVE" => "文件保存时出错",
        "ERROR_FILE_NOT_FOUND" => "找不到上传文件",
        "ERROR_WRITE_CONTENT" => "写入文件内容错误",
        "ERROR_UNKNOWN" => "未知错误",
        "ERROR_DEAD_LINK" => "链接不可用",
        "ERROR_HTTP_LINK" => "链接不是http链接",
        "ERROR_HTTP_CONTENTTYPE" => "链接contentType不正确"
    );

    public function index(){
        header('Access-Control-Allow-Origin: *'); //设置http://www.baidu.com允许跨域访问
        header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header
        date_default_timezone_set("Asia/chongqing");
        error_reporting(E_ERROR);
        header("Content-Type: text/html; charset=utf-8");

        $this->config = config('ueditor.config');
        $action = $_GET['action'];
        switch ($action) {
            case 'config':
                $result =  json_encode($this->config);
                break;
            /* 上传图片 */
            case 'uploadimage':
                $fieldName = $this->config['imageFieldName'];
                $this->config['maxSize'] = $this->config['imageMaxSize'];
                $this->config['allowFiles'] = $this->config['imageAllowFiles'];
                $result = $this->upFile($fieldName);
                break;
            /* 上传涂鸦 */
            case 'uploadscrawl':
                $config = array(
                    "pathFormat" => $this->config['scrawlPathFormat'],
                    "maxSize" => $this->config['scrawlMaxSize'],
                    "allowFiles" => $this->config['scrawlAllowFiles'],
                    "oriName" => "scrawl.png"
                );
                $fieldName = $this->config['scrawlFieldName'];
                $this->config['maxSize'] = $this->config['scrawlMaxSize'];
                $base64 = "base64";
                $result = $this->upBase64($config,$fieldName);
                break;
            /* 上传视频 */
            case 'uploadvideo':
                $fieldName = $this->config['videoFieldName'];
                $this->config['maxSize'] = $this->config['videoMaxSize'];
                $this->config['allowFiles'] = $this->config['videoAllowFiles'];
                $result = $this->upFile($fieldName);
                break;
            /* 上传文件 */
            case 'uploadfile':
                $fieldName = $this->config['fileFieldName'];
                $this->config['maxSize'] = $this->config['fileMaxSize'];
                $this->config['allowFiles'] = $this->config['fileAllowFiles'];
                $result = $this->upFile($fieldName);
                break;
            /* 抓取远程文件 */
            case 'catchimage':
                $config = array(
                    "pathFormat" => $this->config['catcherPathFormat'],
                    "maxSize" => $this->config['catcherMax