在后台编辑页中经常要用到富文本编辑器，比较常用的就是百度的开源插件ueditor,为了快速，没有看文档，直接百度，被坑了一个下午，也给了自己一个警醒，““欲速则不达”，百度的好多东西都是别人不会把场景说的很清楚的，凡是还是先看看文档才是比较实在的。弄了一个下午，结合文档，才终于搞通。我的ueditor版本是1.4.3 UTF8版本

一，大概流程

前端html，在script 中加个name='content'  就可以在后台通过$_POST['content']获取这个富文本的值

<script id="editor"  type="text/plain" style="width:90%;height:220px;"></script>
<textarea rows="3" cols="3" id="textarea_id" style="display:none;">（后台取出来的值）</textarea>

前端js

​
<script type="text/javascript" src="__PUBLIC__/Home/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/lib/ueditor/ueditor.all.js"> </script>
<script type="text/javascript" src="__PUBLIC__/Home/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

// 处理富文本
window.UEDITOR_HOME_URL = "__PUBLIC__/Home/lib/ueditor/"; //这个目录就是放插件ueditor的目录

var editor = UE.getEditor('editor');//初始化

var v=$("#textarea_id").val(); //把内容显示到富文本中
editor.ready(function(){
    if(v!='') {
        editor.setContent(v);
    }
});

​

前端配置文件  ueditor.config.js

​
var URL = window.UEDITOR_HOME_URL || getUEBasePath(); //通过实例化的时候传进来，ueditor的目录

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径，这个非常重要，不然就加载不到后端配置文件，也上传不了图片
        , serverUrl: URL + "php/controller.php"

​

后端配置文件 php/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:baidu.com", /* 图片访问路径前缀 */
    "imagePathFormat": "/Uploads/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}", //放上传的图片

二.排错

刷新你的页面，初始化的时候ueditor会去后台请求配置的php/controller.php?action=config，看看这个有没有成功

如果这部不成功，访问下http://域名/Public/Home/lib/ueditor/php/controller.php?action=config  看看能不能得到json数据，

一般是controller.php出错或者config.json出错。用浏览完访问对应文件就可以看出是否文件语法出错，有时候找不到，就下载新的对应的文件覆盖即可；

2.下载的ueditor的目录结构一般不要修改，它的文件加载是按照默认的目录来加载的

例如：ueditor下面的目录结构是这样的，不能自己加一层目录（我的代码就是加了一层目录导致文件加载不到）

总的来说，使用这个插件修改的并不多，配置 EDITOR_HOME_URL是插件ueditor的目录，serverUrl是向后台交流的接口路径（ueditor/php/controller.php），还有就是在config.json配置上传路径即可。

 

附上：ueditor下载链接 https://ueditor.baidu.com/website/download.html