一、需求分析
项目中用到富文本编辑器的地方很多，富文本编辑器一般都是在pc后台上，因为前端是手机端，因此每次再富文本编辑内容保存以后，在手机端展示的样式和我们在富文本中编辑的不太一样，因此就需要在编写完内容之后可以模拟手机端进行预览一下，但是后端用富文本编辑器的地方比较多，不适合在每个页面进行开发，因此做成插件功能放入ueditor之中的方式改动的代价比较小。
首先看下效果
二、代码
先在ueditor.css中添加按钮样式图片：
路径：ueditorthemesdefaultcssueditor.css
/*手机预览样式*/ .edui-default .edui-for-previewh5.edui-icon{ background-image: url("../images/previewMobile.png"); }
然后在 ueditorthemesdefaultimages 中添加 iphone-bg.png 和 previewMobile.png 图片；在ueditorthemesdefault 目录下创建 html目录，将preview.html页面放入。
提取码：zhkj
在ueditor.config.js中toolbars里加一个按钮 previewMobile
toolbars: [ [ ‘source‘, //源代码 ‘anchor‘, //锚点 ‘undo‘, //撤销 ‘redo‘, //重做 ‘bold‘, //加粗 ‘indent‘, //首行缩进 ‘snapscreen‘, //截图 ‘italic‘, //斜体 ‘underline‘, //下划线 ‘strikethrough‘, //删除线 ‘subscript‘, //下标 ‘fontborder‘, //字符边框 ‘superscript‘, //上标 ‘formatmatch‘, //格式刷 ‘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‘, // 图表 ‘previewMobile‘ // 预览 ]]
添加中文说明（鼠标放上去中文显示）
labelMap:{ ‘previewMobile‘:‘手机预览‘ }
在ueditor.all.js中 btnCmds 加入 previewMobile
//为工具栏添加按钮，以下都是统一的按钮触发命令，所以写在一起 var btnCmds = [‘undo‘, ‘redo‘, ‘formatmatch‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘fontborder‘, ‘touppercase‘, ‘tolowercase‘, ‘strikethrough‘, ‘subscript‘, ‘superscript‘, ‘source‘, ‘indent‘, ‘outdent‘, ‘blockquote‘, ‘pasteplain‘, ‘pagebreak‘, ‘selectall‘, ‘print‘,‘horizontal‘, ‘removeformat‘, ‘time‘, ‘date‘, ‘unlink‘, ‘insertparagraphbeforetable‘, ‘insertrow‘, ‘insertcol‘, ‘mergeright‘, ‘mergedown‘, ‘deleterow‘, ‘deletecol‘, ‘splittorows‘, ‘splittocols‘, ‘splittocells‘, ‘mergecells‘, ‘deletetable‘, ‘drafts‘,‘previewMobile‘];
然后在 getEditor和 ui.Editor 中添加创建遮罩层代码
在这两个里面都加是因为使用不规范问题，ue推荐大家在获得ueditor时使用工厂方法 getEditor，但是实际在使用时，有的也会用 new UE.ui.Editor() 来获得ue对象，所以在两个方法中都加入代码。
UE.getEditor = function (id, opt) { // 在这里添加预览弹窗 var proUrl = getWEBUrl(); var preDocu = document.getElementById("preview-div"); if (preDocu == null || typeof(preDocu) == "undefined" || preDocu == 0 ) { var preview = document.createElement(‘div‘); preview.id = "preview-div"; preview.style.cssText = ‘display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;‘; preview.innerHTML = ‘<div style="box-sizing:border-box;position:absolute;top:67%;left: 50%;transform: translate(-67%, -50%);padding: 75px 22px 93px 19px;width: 410px;height: 840px;background: url(‘ proUrl ‘/static/ueditor/themes/default/images/iphone-bg.png) no-repeat;background-size: 76%"><iframe id="preview" style="width:74.3%;height:72%;" src="‘ proUrl ‘/static/ueditor/themes/default/html/preview.html"></iframe></div>‘; document.body.appendChild(preview); document.getElementById("preview-div").addEventListener("click", function(e) { e.target.style.display = "none"; }); } var editor = instances[id]; if (!editor) { editor = instances[id] = new UE.ui.Editor(opt); editor.render(id); } return editor; };
UE.ui.Editor = function (options) {
....... 省略源代码
// 在这里添加预览弹窗 var proUrl = getWEBUrl(); // 获得项目路径 var preDocu = document.getElementById("preview-div"); if (preDocu == null || typeof(preDocu) == "undefined" || preDocu == 0 ) { var preview = document.createElement(‘div‘); // 报错提示 preview.id = "preview-div"; preview.style.cssText = ‘display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;‘; preview.innerHTML = ‘<div style="box-sizing:border-box;position:absolute;top:67%;left: 50%;transform: translate(-67%, -50%);padding: 75px 22px 93px 19px;width: 410px;height: 840px;background: url(‘ proUrl ‘/static/ueditor/themes/default/images/iphone-bg.png) no-repeat;background-size: 76%"><iframe id="preview" style="width:74.3%;height:72%;" src="‘ proUrl ‘/static/ueditor/themes/default/html/preview.html"></iframe></div>‘; document.body.appendChild(preview); document.getElementById("preview-div").addEventListener("click", function(e) { e.target.style.display = "none"; }); } return editor; };
注：proUrl 替换为自己的项目路径(http://ip:prot//项目名)；
然后再ueditor.all.js中注册预览按钮的点击事件
// 注册手机预览事件 UE.commands[‘previewh5‘] = { execCommand : function(){ var editor = this; document.getElementById("preview-div").style.display = ‘block‘; var ifr_document = document.getElementById("preview").contentWindow; // 获取内联框架 if(ifr_document){ var ifr_content = ifr_document.document.getElementById("phone_preview_div"); ifr_content.innerHTML = editor.getContent() == null ? "" : editor.getContent(); // 富文本编辑器内容填充 } return true; } };