### UEditor 富文本web编辑器 **插件名：** UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器. **位置：** Public\plug\ueditor **插件地址：** http://ueditor.baidu.com/website/download.html **调用：** ~~~ <script type="text/javascript" charset="utf-8" src="__PUBLIC__/plug/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/plug/ueditor/ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/plug/ueditor/lang/zh-cn/zh-cn.js"></script> ~~~ **完整代码：** html ~~~ <div class="form-group"> <label class="col-sm-2 control-label">图文详情：</label> <div class="col-sm-10"> <script id="editor" attr = "{$spu_info.id}" type="text/plain" name = "content" style="width:800px;height:500px;">{$spu_info.graphic_details|htmlspecialchars_decode}</script> </div> </div> ~~~ js ~~~ $(document).ready(function() { setUeditor(); }) ~~~ 函数封装 ~~~ function setUeditor() { //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor', { toolbars: [ [ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough','|', 'forecolor', 'backcolor', '|','insertorderedlist', 'insertunorderedlist', '|', 'paragraph', 'fontfamily', 'fontsize', '|', ], [ 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', ], [ 'simpleupload', 'insertimage','background', '|', 'horizontal','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols','|', ] ], autoHeightEnabled: true, autoFloatEnabled: true, catchRemoteImageEnable:false, }); //当action等于uploadimage时调用我们自己的上传接口，否则走原有的ueditor的接口 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage') { return "/index.php/Woms/Goods/Listing/uploadDetailImage.html"; } else { return this._bkGetActionUrl.call(this, action); } } } ~~~ **截图：**  **插件初始化：** 1、引入插件时，需要对插件进行初始化，最简单的代码只需要 ~~~ var ue = UE.getEditor('editor', {}） ~~~ 2、设置初始高度，这里设置自适应高度 ~~~ var ue = UE.getEditor('editor', { autoHeightEnabled: true, autoFloatEnabled: true, }); ~~~ **工具栏按钮配置：** 插件工具栏默认展示的按钮较多，插件在“ueditor.config.js”文件中统一定义。  我们可以在模板js中添加配置，定制自己需要的按钮，配置项里用竖线 '|' 代表分割线  1、简单列表 ~~~ toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold']] ~~~ 2、多行列表 ~~~ toolbars: [['fullscreen', 'source', 'undo', 'redo'],['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']] ~~~ 3、完整的按钮列表： ~~~ toolbars: [['anchor', //锚点'undo', //撤销'redo', //重做'bold', //加粗'indent', //首行缩进'snapscreen', //截图'italic', //斜体'underline', //下划线'strikethrough', //删除线'subscript', //下标'fontborder', //字符边框'superscript', //上标'formatmatch', //格式刷'source', //源代码'blockquote', //引用'pasteplain', //纯文本粘贴模式'selectall', //全选'print', //打印'preview', //预览'horizontal', //分隔线'removeformat', //清除格式'time', //时间'date', //日期'unlink', //取消链接'insertrow', //前插入行'insertcol', //前插入列'mergeright', //右合并单元格'mergedown', //下合并单元格'deleterow', //删除行'deletecol', //删除列'splittorows', //拆分成行'splittocols', //拆分成列'splittocells', //完全拆分单元格'deletecaption', //删除表格标题'inserttitle', //插入标题'mergecells', //合并多个单元格'deletetable', //删除表格'cleardoc', //清空文档'insertparagraphbeforetable', //"表格前插入行"'insertcode', //代码语言'fontfamily', //字体'fontsize', //字号'paragraph', //段落格式'simpleupload', //单图上传'insertimage', //多图上传'edittable', //表格属性'edittd', //单元格属性'link', //超链接'emotion', //表情'spechars', //特殊字符'searchreplace', //查询替换'map', //Baidu地图'gmap', //Google地图'insertvideo', //视频'help', //帮助'justifyleft', //居左对齐'justifyright', //居右对齐'justifycenter', //居中对齐'justifyjustify', //两端对齐'forecolor', //字体颜色'backcolor', //背景色'insertorderedlist', //有序列表'insertunorderedlist', //无序列表'fullscreen', //全屏'directionalityltr', //从左向右输入'directionalityrtl', //从右向左输入'rowspacingtop', //段前距'rowspacingbottom', //段后距'pagebreak', //分页'insertframe', //插入Iframe'imagenone', //默认'imageleft', //左浮动'imageright', //右浮动'attachment', //附件'imagecenter', //居中'wordimage', //图片转存'lineheight', //行间距'edittip ', //编辑提示'customstyle', //自定义标题'autotypeset', //自动排版'webapp', //百度应用'touppercase', //字母大写'tolowercase', //字母小写'background', //背景'template', //模板'scrawl', //涂鸦'music', //音乐'inserttable', //插入表格'drafts', // 从草稿箱加载'charts', // 图表]] ~~~ **配置Ueditor直接上传图片到图片服务器：** 百度的富文本编辑器Ueditor默认是把图片传到应用服务器上，但是在实际项目中，往往不会把图片直接上传到后端服务器上，而是上传到图床或者CDN上。 1、在模板页面中重写getActionUrl方法，让它返回我们自己的上传图片接口地址就可以了 在编辑的页面中加入以下代码，其中当action等于uploadimage时调用我们自己的上传接口，否则走原有的ueditor的接口 ~~~ UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage') { return '/mycontroller/uploadimage'; } else { return this._bkGetActionUrl.call(this, action); } } ~~~ 2、同时在初始化Ueditor时将远程抓取图片的功能关闭，否则会在复制粘贴时自动讲一个CDN上的图片抓取保存到本地服务器 ~~~ var ue = UE.getEditor('container',{ catchRemoteImageEnable:false, }) ~~~ 3、编写后端接口 后端的PHP接口读取上传文件内容，然后调用图床或者CDN提供的上传接口就可以了，注意这里接口返回的数据格式应与Ueditor接口返回的相同，否则会报错 ~~~ <?php public function uploadDetailImage() { $file = $_FILES['upfile']; if ($_FILES["file"]["error"] == 0) { //上传文件到OSS $img_name = $file['name']; // 图片原名 $img_uri = $file['tmp_name']; // 临时文件的全路径 $suffix = substr($img_name,strrpos($img_name,".")+1); // 获取图片后缀名 // 生成新图片在OSS服务器上的地址 $date_time=date("Ymd",time()); $random = rand(1,99999); $name = time().$random.'.'.$suffix;// 拼接图片名称 $base = 'Uploader/ueditor/'.$date_time.'/'.$name;// 拼接上传到oss之中的路径 // 图片上传到云服务器上 import("Common.Util.Oss.Oss"); $oss = new \Oss();// 实例化oss类 $oss-> upload($base, $img_uri); $url = "http://img.coscia.com.cn/".$base; $res = array( "state" => "SUCCESS", //上传状态，上传成功时必须返回"SUCCESS" "url" => $url, //CDN地址 "title" => $name, //新文件名 "original" => $file['name'], //原始文件名 "type" => $file['type'], //文件类型 "size" => $file['size'], //文件大小 ); $this->ajaxReturn($res); } } ?> ~~~   具体原理参见： https://blog.csdn.net/u011897301/article/details/72911829?locationNum=10&fps=1