thinkphp5使用富文本编辑器Ueditor教程

最近需要富文本编辑器做一些开发，在网上搜了一些，这里只列举一些国内的。

1. Ueditor，http://fex.baidu.com/ueditor/，功能强大，只是它的界面越来越不适应当下的审美了
2. Neditor，https://gitee.com/notadd/neditor，整体基于Ueditor，界面更符合现在的审美。
3. wangEditor，http://www.wangeditor.com/，功能比较简略。
   使用哪款完全看自己，做博客类的可能Ueditor更适合，但是一些轻型的像论坛类的应用可以使用wangEditor和UMeditor，后者是Ueditor的mini版。
   我在项目中试用了ueditor和wangEditor，在这里记录一下踩坑过程。

Ueditor

1. 前端配置，按照教程完全可以配置好，这里简单讲一下

这样界面上就会显示一个富文本编辑器了

界面.png

至于要使用什么功能都可以去 ueditor.config.js里面配置

2. 后端配置
   刚开始配置后端的时候遇到了很多问题，这些问题可能你也会遇到，这里讲一下。因为会用到上传图片或文件的功能，所以需要有一个后端接口处理上传到后端的图片或文件。富文本编辑器上传图片或文件都是采用的异步上传，那么首先要配置就是要发送图片和文件的目的URL，这个配置同样在ueditor.config.js里面
   serverUrl: URL + "../../../index/post/upload"这个serverUrl就是后端接口位置，+后面的内容要换成自己的后端地址，配置完这个接口后Ueditor在初始化的过程中会先向这个接口发送一个请求，请求内容为serverUrl: URL + "../../../index/post/upload?action=config"，因此需要你的后端在对应的接口处接收到这个action参数进行处理，如果action参数是config的话，就要返回一个配置的json内容，这个json内容就是Ueditor文件夹里面的config.json。
   Ueditor初始化完毕后如果用户点击了上传图片的图标，用户选择完图片后js会向同样的后端接口地址发送这样的请求serverUrl: URL + "../../../index/post/upload?action=uploadimage"，这个action后面跟的内容是和config.json里面的配置有关的。

/* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://localhost/bbs/public/uploads/", /* 图片访问路径前缀 */
    "imagePathFormat": "/upload/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */                                                        

imageActionName的内容就是action参数的内容，所以后端接收到的action如果是uploadimage的话，接口就要从$_FILES['upfile']（这个upfile的值取得是imageFieldName的值）里面取得上传的文件并保存在服务端，处理完后需要向前端返回文件信息，比如文件名，保存的url等。官方给了一个后端的demo，需要使用一个文件存储的类，如果是在thinkphp5里面的话则非常简单，tp5的File类功能完全可以做文件存储了。

public function upload(){
        $action = $this->request->param('action');
        switch($action){
            case 'config':
                $result = file_get_contents(ROOT_PATH.'public/static/js/ueditor/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;
}

这里给大家一个后端的demo供参考，向前台返回的图片url地址前台会将它和config.json里面的imageUrlPrefix做一个拼接在前端显示。
以上就是Ueditor的使用了，惯例祝福，生活开心、事业如意。