在后台编辑页中经常要用到富文本编辑器，比较常用的就是百度的开源插件ueditor,为了快速，没有看文档，直接百度，被坑了一个下午，也给了自己一个警醒，““欲速则不达”，百度的好多东西都是别人不会把场景说的很清楚的，凡是还是先看看文档才是比较实在的。弄了一个下午，结合文档，才终于搞通。我的ueditor版本是1.4.3 UTF8版本
一，大概流程
前端html，在script 中加个name='content' 就可以在后台通过$_POST['content']获取这个富文本的值
（后台取出来的值）
前端js
// 处理富文本window.UEDITOR_HOME_URL ="/Public/Home/lib/ueditor/";//这个目录就是放插件ueditor的目录vareditor = UE.getEditor('editor');//初始化varv=$("#textarea_id").val();//把内容显示到富文本中editor.ready(function(){if(v!='') { editor.setContent(v); }});
前端配置文件 ueditor.config.js
varURL =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
网友评论